前言
首先，我们根据React Native-中文文档搭建开发环境，不过在实际的搭建过程中，会出现一些跟官网不一样的情况，虽然大致雷同。
这里记录了我自己的实际开发过程。
一、基础环境
由于React Native项目的编译运行需要依赖原生平台，所以在搭建React Native开发环境过程中，需要事先搭建好原生Android和iOS的开发环境。
1、搭建安卓环境
1-1、安装java环境
在搭建原生Android开发环境过程中，由于Android项目的开发和运行需要依赖Java环境，如果还没有安装Java环境，可以从JDK官网下载操作系统对应的JDK版本然后进行安装。
下载 JDK（Java SE Development Kit）: www.oracle.com/java/techno…
安装步骤可以参考在 MacOS 上安装 Java
安装后可以验证Java开发环境：
java -version 复制代码
1-2、安装Android Studio
- step1：下载并安装 Android Studio ：developer.android.com/studio/inde… （Android Studio 默认会安装最新版本的 Android SDK）
- step2：创建一个项目
- step3：Android Studio的设置板中查看Android SDK Tools的路径
- step4：配置环境变量（操作看官网）
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk\ export PATH=$PATH:$ANDROID_SDK_ROOT/emulator\ export PATH=$PATH:$ANDROID_SDK_ROOT/tools\ export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin\ export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools 复制代码
2、搭建IOS环境
- 安装 Watchman: 监控文件变化
- 安装 Xcode：用来开发IOS/MAc应用
- 安装 CocoaPods：IOS/MAC项目的依赖管理工具，类似于Node.js的npm
- Watchman
brew install watchman 复制代码
- Xcode
React Native 目前需要 Xcode 10 或更高版本。可以通过 App Store 下载 复制代码
- CocoaPods
brew install cocoapods 复制代码
二、创建新项目
先卸载之前全局安装过旧的react-native-cli命令行工具：
npm uninstall -g react-native-cli @react-native-community/cli 复制代码
再创建新的命令工具：
// 普通安装 npx react-native init AwesomeTSProject // 指定版本 npx react-native init AwesomeProject --version 0.66.0 // 指定模版 npx react-native init AwesomeTSProject --template react-native-template-typescript 复制代码
React Native项目构建成功之后，系统还会自动安装项目所需的第三方依赖库。接着，再使用VSCode或WebStrom打开React Native项目。
三、运行 React Native 应用
运行React Native项目之前，需要配置好原生开发环境。即运行iOS 需要正确安装和配置Xcode工具，运行Android App需要正确安装和配置Android Studio和Android SDK Tools。 同时，为了能够正常的运行项目，还需要在项目运行之前启动模拟器或者真机设备。启动模拟器或真机后，我们可以使用如下的命令来查看连接情况。
xcrun simctl list devices //查看可用的iOS设备 adb devices //查看可用的Android设备 复制代码
1、Android环境运行
Android Studio里打开项目，然后在项目的根目录运行执行如下命令即可启动React Native项目：
//启动Android yarn android 或 yarn react-native run- android // 此命令会对项目的原生部分进行编译，同时在后台启动Metro服务对 JavaScript代码进行实时打包处理。 // 当然，Metro服务也可以使用yarn start命令单独启动。 // 如果此命令无法正常运行，可以使用Android Studio或者Xcode打开对应的原生工程来查看报错信息。 复制代码
2、Ios环境运行
//启动iOS yarn ios 或 yarn react-native run-ios 复制代码
可能需要执行以下命令：
cd ios && pod install 复制代码
一些踩坑记录
Error installing Flipper in React Native
Error installing hermes-engine in React Native
java.io.IOException: Requested internal only, but not enough space
相关链接
最新版React Native环境搭建xcode 11.4 build fatal error: module map file xxx/Build/Products/Debug-iphoneos/YogaKit/YogaKit.modulemap' not found #28503
