React-native开发环境搭建(Windows平台)

安装依赖

安装Node.js

React Native开发需要用到Node.js环境。我们做React Native开发会经常性的和Node.js进行打交道，比如：我们用npm start命令启动React Native的启动器；用npm install安装项目所依赖的第三方组件；用npm publish往npm上发布一些组件等。

安装Node.js有两种常见的方式：

1、一种是通过Windows包管理工具Chocolatey来安装。
这种方式需要安装Chocolatey客户端以及 PowerShell v3+方式有些繁琐。
2、第二种方式，直接下载Node.js安装包来进行安装包。
这种方式操作简单方便。

接下来我们就通过第二种方式来安装Node.js

前往链接: https://nodejs.org/en/download/下载Node.js Windows安装器，根据系统的版本选择相应的.msi下载即可。
图片:
然后，双击下载好的.msi文件安装即可，安装完成后，打开终端，输出node -v即可查看我们刚才安装的node.js的版本：nvm

注意node版本要大于14

安装Android开发工具Android Studio

安装AndroidStudio我们可以到Android开发者官网进行下载：链接: developer.android.com。

因为Android开发者官网的服务器设在国外，国内没有翻墙的用户通常情况一下是无法打开的，为此Google在2016年开发者大会上公布了developer.android.google.cn，这个特别为中国的Android开发者推出的官网，有中文界面。

大家可以在上述的网站上下载Android Studio，下载成功之后安装即可。

也可参考Android官方提供的按照教程来安装Android Studio：
https://developer.android.google.cn/studio/install
https://developer.android.com/studio/install（需要vpn）

上面两个网站根据你网络实际情况进行选择打开。

下载SDK
1、打开Android Studio, 点击 “Configure” 然后选择 “SDK Manager”

2、在"SDK Manager"中选择 “SDK Platforms” 点击 “Show Package Details” 选择 Android 10 (Q)：

Android SDK Platform 29
Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image
(SDK Platforms有可能空，这个是网络原因，本地网络代理切换成no proxy，换成手机热点连接）

只要这里有插件后续安装就比较方便。

3、之后选择 “SDK Tools” 点击 “Show Package Details” 展开 “Android SDK Build-Tools” entry, 选择 29.0.2以及其他更高的版本

最后，点击 “Apply” 来下载Android SDK 和相关的 build tools。
下载SDK时留意下面板中的SDK路径。

添加环境变量
1、打开Windows Control的添加环境变量窗口
2、创建一个名为ANDROID_HOME 的环境变量，填写SDK路径：

通常SDK被安装在 %LOCALAPPDATA%\Android\Sdk目录下。

另外，还需要将platform-tools添加到系统环境变量的Path中：

1、选择改变环境变量，选择Path

2、点击编辑，然后添加platform-tools所在的目录：

%LOCALAPPDATA%\Android\Sdk\platform-tools
记得将%LOCALAPPDATA%替换成你的真实目录。

创建项目

初始化一个React Native应用，我们可以通过React Native命令行工具来完成，打开终端输入并运行下面命令：

npx react-native init GitHub_RN 
//创建指定版本的RN项目
npx react-native init GitHub_RN --version X.XX.X  
//创建支持typescript的RN项目
npx react-native init GitHub_RN --template react-native-template-typescript
1
2
3
4
5

运行此命令之后，React Native会从npm上下载一些项目所依赖的包，并完成项目的初始化：

GitHub_RN
│   index.js 项目入口文件
│  
└───android Android Native项目；
│   
└───ios  iOS Native项目；
│   
└───App.js/App.tsx 初始化时生成的模板页面
│
└───package.json 项目配置文件
1
2
3
4
5
6
7
8
9
10

以上是官方方式创建，以下是我实际操作简便方式
用react-native-cli脚手架执行
安装命令：npm install -g react-native-cli
创建：
react-native init HelloReact
这种经常报错TypeError: cli.init is not a function，用下面的命令：
npx react-native init HelloReactNative --version 0.68.2

运行项目

React Native应用创建完成之后呢，我们便可以运行它了，运行一个React Native应用通常有两种方式：
第一种方式：通过React Native命令行工具

打开终端进入React Native项目的根目录然后输入并运行下面命令即可：

npx react-native run-android
//或者通过下面命令来运行
npm run android
1
2
3

第二种方式：通过Android Studio来运行
1、通过Android Studio打开项目下的android目录
2、然后等项目构建完成后通过Android Studio的运行按钮来和运行

Windows修改npm镜像的方法：

在Windows电脑上我们可以在.npmrc文件中设置npm的下载镜像地址，.npmrc文件通常在C:\Program Files\nodejs\node_modules\npm.npmrc路径下，打开此文件然后添加：

registry = https://registry.npm.taobao.org