react-native 开荒记(一) 开发环境的搭建

4次阅读

共计 2630 个字符,预计需要花费 7 分钟才能阅读完成。

环境搭建
安装依赖
所用平台: 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 nodebrew install watchmannpm config set registry https://registry.npm.taobao.org –globalnpm config set disturl https://npm.taobao.org/dist –globalnpm install -g yarn react-native-cliyarn config set registry https://registry.npm.taobao.org –globalyarn config set disturl https://npm.taobao.org/dist –global
注:官方推荐使用 brew 和 yarn
ios
XcodeReact 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/sdkexport PATH=$PATH:$ANDROID_HOME/toolsexport PATH=$PATH:$ANDROID_HOME/tools/binexport PATH=$PATH:$ANDROID_HOME/platform-toolsexport 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

正文完
 0