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-clinpm config set registry https://registry.npm.taobao.org --globalnpm 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.项目的测试安装

//初始化项目HRXreact-native init HRX//进入项目目录cd HRX//运行react-native appreact-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 file or with an ANDROID_HOME environment variable.* Try:Run with --stacktrace option to get the stack trace. Run with --info or --debugoption to get more log output.BUILD FAILEDTotal time: 1.298 secsCould 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 haveset 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的初步开发吧