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下载即可。
图片: React-native开发环境搭建(Windows平台)_第1张图片
然后,双击下载好的.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(需要)

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

下载SDK
1、打开Android Studio, 点击 “Configure” 然后选择 “SDK Manager”
React-native开发环境搭建(Windows平台)_第2张图片
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,换成手机热点连接)
React-native开发环境搭建(Windows平台)_第3张图片
只要这里有插件后续安装就比较方便。

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路径:
React-native开发环境搭建(Windows平台)_第4张图片
通常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

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

GitHub_RN
│   index.js 项目入口文件
│  
└───android Android Native项目;
│   
└───ios  iOS Native项目;
│   
└───App.js/App.tsx 初始化时生成的模板页面
│
└───package.json 项目配置文件

以上是官方方式创建,以下是我实际操作简便方式
用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

第二种方式:通过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

你可能感兴趣的:(react-native,react,native)