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
`

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

如果你的命令行不是 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自带的虚拟机,实际中我推荐使用其他。

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

之后执行

cd TestProject
react-native run-android

当看到
《react-native 开荒记(一) 开发环境的搭建》
恭喜你已经运行了第一个 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

    原文作者:清水
    原文地址: https://segmentfault.com/a/1190000018552806
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞