前言

首先，我们根据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开发环境搭建

前言