react nativewindow环境的搭建

  • Z时代
  • 2024-01-10
  • 分类：综合

react



windows下搭建react-native踩过的坑

下面我就作为一个手机native开发小白来聊聊如何在Windows环境下搭建react-native：

第1步：安装最新版Java JDK必须在1.8以上

我们在Windows下面搭建react-native环境就是为了开发Android程序，必须有Java环境。

  • 下载安装JDK

    注意根据自己的机型选择x64还是x86。

    官网地址：

    http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

  • 配置环境

    这个比较简单，直接看度娘：

    http://jingyan.baidu.com/article/f96699bb8b38e0894e3c1bef.html

第2步：安装Android SDK

  • 下载安装Android SDK

    直接下载SDK Tools，然后通过SDKManager安装react-native运行所需要的环境，注意选择x64还是x86。

    官网下载地址：

    https://developer.android.com/sdk/installing/index.html

    国内下载地址：

    http://androiddevtools.cn/

  • 配置Android环境

    这个跟配置JDK环境变量基本一样，看度娘：

    http://jingyan.baidu.com/article/f71d603757965b1ab641d12a.html， 记得把SDK目录和platform-tools目录添加到环境变量中。platform-tools加入环境变量是因为它内置了adb命令，方便我们查看设备。

  • 设置SDK

    根据官网提示，打开Android SDK Manager，我们需要安装以下项目的最新版本：

  • Tools/Android SDK Tools

  • Tools/Android SDK Platform-tools

  • Tools/Android SDK Build-tools

  • Android 6.0 (API 23)/SDK Platform

  • Extras/Android Support Library

  • Extras/Local Maven repository for Support Libraries

直接看图安装：

第3步：安装C++   这个按不安装都是无所谓的

编译node.js的C++模块时需要用到，我也就一说，其实大部分同学肯定是已经安装了的，因为大家早就已经用上node.js。需要安装的童鞋可以在

https://www.visualstudio.com/ 下载Visual Studio 2013或2015，也可选择Windows SDK、cygwin或mingw等其他C++环境。

第4步：安装node.js

这个不用说了，前端童鞋怎能没有node环境！？

第5步：安装react-native命令行工具

折腾了辣么多的依赖环境，终于来到激动人心的部分，我们要开始折腾reac-native啦！首先就是要通过npm安装react-native命令行工具：

$ npm install -g react-native-cli

也可以在

react-native github 通过git clone或者Download ZIP下载解压，然后执行以下代码：

$ cd react-native-cli
$ npm install -g

react-native-cli是一个终端命令，它可以完成其余的设置工作，刚才这条命令会往你的终端安装一个叫做react-native的命令。

第6步：创建react-native项目

有了react-native命令行工具，我们就可以用它在创建初始化一个react-native项目：

$ react-native init AwesomeProject

这个命令会初始化一个工程、下载React Native的所有源代码和依赖包，最后在AwesomePrjoect/iOS/AwesomeProject.xcodeproj和AwesomeProject/android/app下分别创建一个新的XCode工程和一个gradle工程。

如果你网络不怎么样，这里会耗时相当相当久，甚至经常因为网络的原因下载项目失败！所以

react-native中文官网 推荐你使用淘宝镜像：

$ npm config set registry https://registry.npm.taobao.org

当然如果你也可以使用v*n加速，不过我推荐你使用中文官网推荐的

完整的绿色纯净新项目包 。

第7步：运行packager

为了避免一会儿run-android报警告，我们现在先通过下面命令开启运行packager，这个主要是启动react native的服务，这样才能实现真机的调试：

$ cd AwesomeProject
$ npm start   or  react-native start

如果你碰到了ERROR Watcher took too long to load的报错，请尝试将这个文件node modules/react-native/packager/react-packager/src/FileWatcher/index.js中的MAX WAIT_TIME值改得更大一些。

运行packager的目的是让node开启一个服务来实时将我们项目的.js文件编译成功.jsbunde文件，我们可以通过

http://localhost:8081/index.android.bundle?platform=android 来访问到这个文件。 这就是react-native开发native程序的亮点之一，react-native通过实时编译并获取这个文件来做到native app实时热更新。

第8步：链接设备或者模拟器

如果正确配置了Android SDK环境变量，我们在docs命令控制行中运行 adb devices 应该可以看到下面界面： 我们看到列表为空，是因为我们还未连接任何设备。我通过USB接入手机，再运行看看：

我们可以看到设备号为 JNIJP7NFZ5JZYDWK 已经连接成功，这就是我那吊炸天的红米手机！ 我们还可以运行Android模拟器，react-native中文官网 推荐Genymotion

。不过Genymotion依赖VirtualBox(虚拟机)，如果你懒得折腾，还可以下载其他模拟器，比如

BlueStacks 等等。

第8步：编译运行Android

我们进入AwesomeProject目录， $ cd AwesomeProject ，然后在AwesomeProject目录下运行$ react-native run-android ，就会构建工程并自动安装到你的模拟器或者设备，同时启动用于实现动态代码加载的Node服务。说的轻巧，第一次运行的时候，会下载gradle

文件，然而在我们的办公网络环境运行就会报下面的错：

我的解决办法是：

  • 先到

    http://androiddevtools.cn/ 找到gradle-2.4-all.zip这个文件的下载地址：

    http://pan.baidu.com/s/1c0dcgfe， 将它下载到本地。

  • 然后将E:/AwesomeProject/android/gradle/wrapper/gradle-wrapper.properties中的distributionUrl=https://services.gradle.org/distributions/gradle-2.4-all.zip

    改为distributionUrl=file:///E:/AwesomeProject/gradle-2.4-all.zip，让它本地离线下载。

graddle构建过程中会下载很多jar包，如果出现下载失败，多重试几次。这里简单解释一下gradle(其实我也不太懂，囧...)，我的理解是，graddle其实就是一种自动化构建工具，它通过依赖管理自动化编译测试部署等过程产生具体的apk，类似我们前端常用的grunt，gulp等工具。

ok，如果你运行顺利，就能在模拟器或者设备上看到一个名为AwesomeProject的Android App，前提是要确保如第7步所说的，你的设备已经正确连接。说实话，我运行的时候，事情远没这么顺利，再看一个奇怪的报错：

解决办法 ： 将android/build.gradle文件中的classpath 'com.android.tools.build:gradle:1.3.1' 改为classpath

'com.android.tools.build:gradle:1.2.3' 。猜测是插件包不兼容导致。

第9步：运行程序

此时我们便可以打开真机运行AwesomeProject程序啦，初次运行可能会遇到一些坑:

  • 程序白屏

    请找到并开启AwesomeProject的悬浮窗权限。 设置 --> 其他应用管理 --> 已下载 --> 点击AwesomeProject --> 权限管理 --> 显示悬浮窗 --> 允许 。miui系统的设置在此处 。

  • Unable to download JS bundle 如果此时你看到一个大红色的报错，那么你成功也不远啦！这个报错是因为app获取不到packager生成的jsbundle文件，我们打开AwesomeProject，摇晃一下设备，就会看到下面的界面：

我们可以设置本地服务器环境解决： Dev settings -> Debug server host & port for device -> 设置电脑IP:port

点击 Reload JS 成功的话就可以看到我们期待已久的Hello World！

第10步：调试程序

再看一下我们通过摇晃设备弹出的菜单选项：

  • Reload JS

    我们修改项目上任何js代码，都可以通过 Reload JS 命令查看到最新的改动；

  • Debug JS

    这个命令可以 帮助我们在chrome的调试控制台调试react-native代码，我们在chrome浏览器打开

    http://localhost:8081/debugger-ui ，然后点击设备的 Debug JS 就可以在控制台看到我们程序中打印的console.log，我们还可以断点调试。

  • Disable Live Reload

    这个命令默认打开，我们开发过程中保存代码的同时，设备就会实时刷新。

  • 检查元素 通过 检查元素 我们可以在设备上面看到我们的css元素布局，不过这个功能跟chrome比，真的弱爆了。

  • Disable Perf Monitor

    打开可以实时显示程序渲染帧频。

  • Dev Settings

    打开开发调试设置。

结语

折腾环境的过程中确实遇到不少的坑，导致前期学习进度进展的相当缓慢，主要原因是自己对手机开发领域的不熟悉，很多概念都要做一番理解，另一方面也是自己阅读文档不够仔细，错过了一些关键的技术细节，当然还有很多无法避免的客观因素，比如网络环境。踩坑的路程还远远没有结束，需要尽快更加详尽地理解react-native的运行机制，才能更快理解每个报错背后的原因，才能更快地解决问题。

以上是 react nativewindow环境的搭建 的全部内容， 来源链接： utcz.com/z/381790.html

回到顶部