Windows下搭建React Native开发环境

Posted on   |   In   |     |  

本教程配置系统：Windows
RN官方英文版教程
RN中文版教程

安装Nodejs

到官网下载Windows版本的Nodejs，通过node -v的命令来测试NodeJS是否安装成功

安装git

下载地址
注意：需选择Use Git from the Windows Command Prompt，Use Windows’ default console window，这样会帮你配置好path环境，可在cmd中直接运行git命令。

安装react-native命令行工具react-native-cli

1）选择一个安装目录D:\react_native_workspace
2）我这里喜欢把源码下下来装，在刚安装的git bash中

1
2
D:\react_native_workspace>git clone https://github.com/facebook/react-native.git
D:\react_native_workspace\react-native\react-native-cli>npm install -g

安装过程中遇到了Error: Cannot find module ‘invariant’错误

1
D:\react_native_workspace>npm i --save-dev invariant

可解决

运行第一个RN项目

创建RN项目
D:\react_native_workspace>react-native init firstFN
运行package（这步可跳过，直接运行项目）

1
D:\react_native_workspace\firstFN>react-native start

如果可以访问http://localhost:8081/index.android.bundle?platform=android，表示服务器端已经可以了。
运行项目
To run your app on Android:
Have an Android emulator running (quickest way to get started), or a device connected

1
D:\react_native_workspace\firstFN>react-native run-android

如果报错java.lang.RuntimeException: SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
需配置Android SDK环境变量

1
2
3
4
ANDROID_HOME
D:\software\adt-bundle-windows-x86_64-20140702\sdk
path后添加
;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

运行成功会看到如下界面
第一次运行界面

修改项目

使用你喜欢的文本编辑器打开index.android.js并随便改上几行
按两下R键，或是用Menu键（通常是F2，在Genymotion模拟器中是Ctrl+M）打开开发者菜单，然后选择 Reload JS 就可以看到你的最新修改。

运行RN自带的例子

按照Examples\Movies中的README.md运行，其他例子改相应的名称即可

1
2
3
D:\react_native_workspace\react-native\>npm install      //或者npm i
D:\react_native_workspace\react-native\>./gradlew :Examples:Movies:android:app:installDebug
D:\react_native_workspace\react-native\>./packager/packager.sh