Windows 10 下 ReactNative 开发的 And
[TOC]
参考链接
整体步骤:
1.安装依赖软件:
1.1 安装包管理器软件Chocolatey;
1) 以管理员身份运行CMD
2) 输入以下安装命令
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
注意:如果在安装过程中卡住,请重试几次。如果还是不行,建议先设置网络VPN翻墙后再重试,实践过程中验证,翻墙后速度大幅提升。
1.2 通过Chocolatey来下载Python2(注意:目前不支持python3)
1) 继续在上面打开的命令行里输入安装命令
choco install python2
这一步一般没有什么问题
1.3 通过Chocolatey来安装NodeJS
1)继续在上面打开的命令行输入安装命令
choco install nodejs.install
这一步一般没有什么问题
前方高能
安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。按照一贯的步骤,我们在上面打开的命令行里接着输入设置命令如下:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
duang!这个时候出现了'npm' 不是内部或外部命令,也不是可运行的程序
或批处理文件。
原因是:上面装完两个依赖软件后,设置了npm环境变量,你需要关闭现有的命令符提示窗口然后重新打开,这样新的环境变量才能生效。
解决办法:重新打开一个CMD命令行,再进行设置即可。
1.4 安装yarn、ReactNative命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
- 在上面命令行接着输入
npm install -g yarn react-native-cli
这一步一般没有什么问题
2.安装JDK1.8或者以上
1) 去JDK官网下载JDK
2) 运行安装
3) 设置系统环境 JAVA_HOME 变量(重要),新建系统变量,将JDK路径传进去
3.安装AndroidStudio2.0或者以上(推荐2.3)
1) 去 Android 官网下载 AndroidStudio 2.3
2) 设置 ANDROID_HOME 环境变量还有tools、platform-tools;
2) 运行起一个HelloWorld
3) 创建一个模拟器
注意:如果是X86模拟器,需要去电脑bios里面去启动虚拟设置为enabled。
以上就是所有准备工作
测试安装
1. 创建ReactNative 项目
react-native init AwesomeProject
2. 进入目录
cd AwesomeProject
3. 编译 Android 项目并安装到模拟器上
react-native run-android
注意:这一步可能会报gradle下载不了的错。多试几次,或者翻墙再试。
注意:请确保模拟器已经运行起来了。
ReactNative 代码部分
IDE推荐用webstorm,下载链接,破解链接。安装完后直接导入整个ReactNative项目即可。
修改代码
在 webstorm 里面打开index.android.js,随意修改些文字,然后点击模拟器,window的话双击键盘R字母,即可刷新界面。
注意:如果是用Genymotion,可能要设置下debug server host 地址。地址不对会红屏。
通过以下命令调出模拟器设置菜单。
adb shell input keyevent 82
点击 debug server host & port for device,将对应地址设置进去。如:10.0.0.2之类的。
基本上从搭建环境到编写代码运行整个流程就是这样了。有问题可以去ReactNative中文网查看faq。