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