react-native 环境搭建+bug修复

react-native在2015年由faceBook提出,github日活跃量5000+;可见react-native的关注度;react-native同时兼顾ios和android;当然大背景好奇的可以百度,下面 开始搭建react-native环境<可参见react-native中文网>:

1.Chocolatey的安装

网址:https://chocolatey.org/ 在cmd中输入,进行安装

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

2.安装完后开始安装python

cmd窗口安装:

choco install python2

3.接着安装node.js<作为连接js>

choco install nodejs.install

安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具）。注意：不要使用cnpm！cnpm安装的模块路径比较奇怪，packager不能正常识别！

npm install -g yarn react-native-cli npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global 如果你遇到EACCES: permission denied权限错误，可以尝试运行下面的命令（限linux系统）： sudo npm install -g yarn react-native-cli.

3.react-native环境变量配置

首先jdk,android sdk-tools,android-sdk-platform-tool,android-sdk-platforms的配置;下面看我的环境配置

配置android studio,react-native,要求android Api 23:

4.可选安装项:

1.Git:

choco install git

在命令行安装git,不需要手动配置环境变量,会自动配置;

2.Genymotion<模拟器安装>,性能各方面比较好的模拟器,不过个人还是建议真机测试;

5.项目的测试安装

//初始化项目HRX react-native init HRX //进入项目目录 cd HRX //运行react-native app react-native run-android

如果不出bug就以上三步便可以成功开启一个react-native项目;

6.安装项目过程中bug修复

在react-native中bug集中出现在react-antive run-android即运行项目的时候: 1.首先看第一个bug 可以看出来app没有注册根容器;出现以上错误的有两点: 第一种可能是代码名不一致:

图中app的name必须一致

第二种可能就是在开启第二个react-native时候没有关闭上一个app的node.js界面 比如开启YJF时候node.js还停留在LJP就会报这个错误

2.再看第二个bug

FAILURE: Build failed with an exception. * What went wrong: A problem occurred configuring project ':app'. > SDK location not found. Define location with sdk.dir in the local.properties f ile or with an ANDROID_HOME environment variable. * Try: Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. BUILD FAILED Total time: 1.298 secs Could not install the app on the device, read the error above for details. Make sure you have an Android emulator running or a device connected and have set up your Android development environment: https://facebook.github.io/react-native/docs/android-setup.html

1.首先第一种可能就环境的问题 ,比如

1.jdk没有配置 或者不是1.8版本 2.android sdk 下platforms,tools,platform-tool缺一不可 3.android sdk 必须是23 或者以上

2.就是没有指明本地sdk的路径:

在android目录下没有local.properties来指明本地sdk的位置,这时候往往需要手动添加

ok 这样react-antive的第一个项目就完美的跑起来,通过修改index.android.js或者index.ios.js来实现react-native的初步开发吧