react-native - 开发环境的搭建

环境搭建

安装依赖

所用平台: macOS 故文章内容基于macOS平台进行，官方最新react-native 0.58版本

目标平台所需安装的依赖不同

1.当目标平台为ios时
  必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 Xcode(苹果公司目前只允许在Mac电脑上开发iOS应用。如果你没有Mac，那么只能考虑使用沙盒环境，或者去开发Android应用)。
2.当目标平台为Android时
  必须安装的依赖有：Node、Watchman 和 React Native 命令行工具以及 JDK 和 Android Studio(虽然你可以使用任何编辑器来开发应用（编写 js 代码），但你仍然必须安装 Android Studio 来获得编译 Android 应用所需的工具和环境)。

以下为官方教程安装

brew install node
brew install watchman
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global

注：官方推荐使用brew和yarn

ios

Xcode
React Native 目前需要Xcode 9.4 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

Xcode 的命令行工具
启动 Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode 的命令行工具中包含一些必须的工具，比如git等。

Android

1.安装 Java Development Kit和Android Studio
  首先下载和安装 Java Development Kit和Android Studio，这个就自行百度吧（这版React Native 需要 Java Development Kit [JDK] 1.8）。

2.安装 Android SDK
  Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK（注意 SDK 版本不等于终端系统版本，RN 目前支持 android4.1 以上设备）。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。
  SDK Manager 还可以在 Android Studio 的"Preferences"菜单中找到。具体路径是Appearance & Behavior → System Settings → Android SDK。
  在 SDK Manager 中选择"SDK Platforms"选项卡，然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项，选中。
然后点击"SDK Tools"选项卡，同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项，确保选中了 React Native 所必须的28.0.3版本。（你可以同时安装多个其他版本）。

最后点击"Apply"来下载和安装这些组件。

3.配置 ANDROID_HOME 环境变量
React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径，从而正常进行编译。

具体的做法是把下面的命令加入到~/.bash_profile文件中：

注：~表示用户目录，即/Users/你的用户名/，而小数点开头的文件在 Finder 中是隐藏的，并且这个文件有可能并不存在。可在终端下使用vi ~/.bash_profile命令创建或编辑。（vim基本命令 输入i 退出输入esc 命令模式:wq 保存退出）。

如果你不是通过Android Studio安装的sdk，则其路径可能不同，请自行确定清楚。

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools
export PATH=$PATH:$ANDROID_HOME/emulator`

如果你的命令行不是 bash，而是例如 zsh 等其他，请使用对应的配置文件。

使用source $HOME/.bash_profile命令来使环境变量设置立即生效（否则重启后才生效）。可以使用echo $ANDROID_HOME检查此变量是否已正确设置。

请确保你正常指定了 Android SDK 路径。你可以在 Android Studio 的"Preferences"菜单中查看 SDK 的真实路径，具体是Appearance & Behavior → System Settings → Android SDK。

创建新项目

react-native init TestProject

可以使用--version 创建指定版本的项目。例如react-native init TestProject --version 0.57.3。注意版本号必须精确到两个小数点

运行你刚创建的项目

  以Android为例,用Android Studio打开项目下的android文件，点击虚拟机图标运行虚拟机，当然也可以使用真机或者其他，在这里省事用了Android Studio自带的虚拟机，实际中我推荐使用其他。

之后执行

cd TestProject
react-native run-android

当看到

恭喜你已经运行了第一个 React Native 应用。

笔者环境版本 react-native@0.58 node@8.11.3 watchman@4.9.0 react-native-cli@2.0.1 Xcode@10.1 javac@1.8.0_201 yarn@1.13.0