react-native 环境搭建+bug修复

974 阅读3分钟
原文链接: blog.csdn.net

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

1.Chocolatey的安装

网址: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的初步开发吧