windows安装React Native开发运行环境

2023-02-26 13:25:36

React Native是什么

React Native是facebook开源的一个用于开发app的框架。React Native的设计理念：既拥有Native (原生) 的用户体验、又保留React的开发效率。这个理念似乎迎合了业界普片存在的痛点，自2015年9月份开源不到1周github star破万。

虽然React Native官方声明开发需要使用mac本，但是如果只是想用React Native来开发一个android应用，也是可以在windows下进行的。

此处省略，网上教程一大堆，通过java -version检查是否成功。

android SDK下载地址：AEZO.CN备份（提取码：3fb4）
在sdk的安装目录运行SDK Manager，选择以下项目，再点击install packages（注意勾选的SDK platform-tools和SDK Build-tools版本要一样）

React Native是基于js的，node.js是轻量级的Web服务器，想要是React Native跑起来需要安装node，如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本

下载React Native：React Native 点击Download ZIP进行下载
将文件解压到某目录，如：D:\software\react-native
在命令行进入到react-native目录下的react-native-cli，运行命令npm install -g，安装好之后，可以在命令行运行react-native命令了。安装得一会，如果一直没反映，重启CMD再次运行

在命令行中进入项目目录DemoProject，输入react-native start，等待一段时间
这时候可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android，如果可以访问表示服务器端已经可以了

启动bluestacks，或者将手机连接到电脑（手机要启动USB调试模式，命令 adb devices 可以查看当前设备）
刚刚运行package的命令行不要关闭，重新启动一个新的命令行
法一：
- 进入项目目录DemoProject，输入react-native run-android
- 等待运行(如果是第一次运行，首先会下载gradle，时间较长)
法二（推荐）：
- 打开DemoProject\android\gradle\wrapper目录下的gradle-wrapper.properties文件
- 将distributionUrl后面的链接改为国内镜像地址 http://mta.zttit.com:8080/images/gradle-2.4-all.zip
- 进入项目目录DemoProject，输入react-native run-android（不要关闭package的命令行）。此时bluestacks已经安装上了此应用，如果没有可以在DemoProject\android\app\build\outputs\apk目录下找到app-debug.apk文件即是生成的安装包

第一次手机肯定报错
这时候点击bluestacks左边菜单栏的抖动（如果直接连接手机，摇一摇手机即可），点击Dev Settings后，点击Debug server host & port for device,设置IP和端口。这里的IP是电脑的IP，不知道的可以在命令行中输入ipconfig进行查询，端口号固定8081
设置完成后，回到空白页面，再次摇一摇手机，选择Reload JS，程序就运行起来，出现Welcome to React Native！