React-Native环境搭建流程

React-Native环境搭建流程 React-Native:0.63,React:17.0

对应系统对应不同环境：Mac->Xcode，Windows->AndroidStudio，RN->VSCode

---

希望这篇文章对你的问题可以有效地解决。防止以后忘记环境安装流程，对你以后更换工作并且又要重新环境有用处。蟹蟹！

---

前言

不多bb,直接开造

---

以下是本篇文章正文内容，下面案例可供参考

一、基本步骤

基本步骤，搭建完直接启动就可以

命令行工具：（react-native-cli）npm install -g yarn react-native-cli

编译器: VSCode.RN开发

组件库：Node.组件下载库 Npm，国内还是用 Yarn。Node-versions>12

Android编译器：AndroidStudio.Android原生，其自带SDK

Android编译环境：JDK1.8.跑AS.JDK-versions>1.8

IOS编译环境：XCode.IOS原生，几十个G，下载完直接跑就ok

组件下载工具：
Npm：Node自带，不过国内用做最好在控制台cmd运行，npx nrm use taobao ，淘宝源
Yarn：npm install -g yarn,代替npm的国内工具下载效率更加快，npm可能要翻墙

IOS包管理器：CocoaPods.可以理解为ios的npm。0.60之后用来管理依赖的

Mac包集成管理器：Homebrew.可以用来安装Node & Watchman啥的.brew install node

监视文件变更：Watchman.(packager 可以快速捕捉文件的变化从而实现实时刷新).热加载

---

二、创建项目

1.创建项目文件
npx react-native init Demo --version X.XX.X   下载成功后在你这个运行的cmd控制台文件夹里面找到你初始化的项目比如Demo

2.打开项目文件
(1.打开你创建项目Demo，在vscode里面找到即可
(2.并且在vscode里面新建一个终端
(3.检查项目结构里面是否有node_modules文件
(4.打开项目结构最底部的一个package.json文件的react版本和react-native版本

3.初始化项目
yarn install  或者  npm install   
正常来说你的Demo项目里面就已经有一个名叫node_modules的文件，这就是你下载的组件啥的七七八八都在里面

4.打开android项目文件
(1.打开AndroidStudio后
(2.点击第二个Open an Existing Project
(3.找到你在之前init创建的Demo项目并在你项目里面找到你的android文件。
这就是你的android项目，原生代码放置处，一些关于原生的地方就在这写，ios也是。
检查有无错误。检查是否连接手机。检验JDK路径。检验SDK是否下载。检验Gradle版本是否对应AndroidStudio

5.连接USB手机
(1.一台安卓手机
(2.连接USB数据线
(3.打开USB文件传输模式
(3.打开手机开发者模式。小米手机>我的设备>全部参数>点击MIUI版本>开发者选项>打开USB调试和USB安装

6.启动项目
直接在VScode中的终端控制台运行 react-native run-android。可能无法连接需要映射端口adb reverse tcp:8081 tcp:8081
注意如果你用的是Mac启动的又是IOS，那就先启动服务react-native start，再启动模拟器react-native run-android

---

三、部分问题解决方案

部分问题解决，也有可能我写的有错误，欢迎大家来指正，防止本文章继续错下去。麻烦了

1.Npm和JDK版本问题
答：注意 Node 的版本应大于等于 12，而 JDK 的版本必须是 1.8（目前不支持 1.9 及更高版本）。

2.npm下载时间速度太慢甚至卡住
答：切换淘宝源。使用nrm工具切换淘宝源 npx nrm use taobao或者使用yarn替代 npm  npm install -g yarn

3.下载cocoapods速度过于慢
答：
	ctrl+c中断
	$ brew install cocoapods 
	$ cd ios
	$ pod install --repo-update
用brew来装cocoapods，然后到项目目录里更新
中途遇到SDK “iphoneos” cannot be located错误，参照来指定command路径，然后重新pod install --repo-update

---

总结

这里就是本文章的所有内容，希望对你有所帮助。ReactNative官网项目搭建流程.谢谢大家