风林火山阴雷
其疾如风、其徐如林、侵略如火、不动如山、难知如阴、动如雷震。

前言

本篇文章主要讲解React Native(简称RN)开发环境的搭建,学习这篇文章可能需要开发者要懂Android原生开发环境搭建、node环境搭建和mac基本使用。

  • 系统:mac
  • React Native:0.58

Homebrew

Homebrew是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或者卸载软件,相当于linux下的apt-get、yum神器。Homebre可以在Mac上安装一些OS X没有的UNIX工具,Homebrew将这些工具统统安装到了 /usr/local/Cellar 目录中,并在 /usr/local/bin 中创建符号链接。Homebrew官网:https://brew.sh/index_zh-cn.html

Homebrew的安装

通过以下命令来安装Homebrew。

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Homebrew的使用

  • 安装软件:brew install 软件名,例:brew install wget
  • 搜索软件:brew search 软件名,例:brew search wget
  • 卸载软件:brew uninstall 软件名,例:brew uninstall wget
  • 更新所有软件:brew update,通过 update 可以把包信息更新到最新,不过包更新是通过git命令,所以要先通过 brew install git 命令安装git。
  • 更新具体软件:brew upgrade 软件名 ,例:brew upgrade git
  • 显示已安装软件:brew list
  • 查看软件信息:brew info/home 软件名 ,例:brew info git
  • 查看那些已安装的程序需要更新: brew outdated
  • 显示包依赖:brew reps

安装Node、watchman

我们使用mac上软件包管理工具安装Node和watchman。

brew install node
brew install watchman

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。 Node.js 的包管理器 npm,是全球最大的开源库生态系统,前端开发人员通过使用npm来管理依赖包。node版本需要在v8.3以上,安装完node后建议科学上网加速项目的搭建过程。

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

安装React Native命令行工具

通过安装react-native-cli命令行工具来生成React Native项目。

npm install -g react-native-cli

Java开发环境

由于Android开发依赖于Java开发环境,所以需要去下载JDK。React Native目前支持Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本)。所以建议去官网下载1.8版本的jdk。官网地址: https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html

Android开发环境

由于我是一名Android开发人员,所以在这里简单介绍一下Android开发环境搭建过程,可能下载的开发工具需要翻墙。

Android studio

Android studio是Android官方的开发工具,Android studio下载可以去官网(https://developer.android.com/studio/?hl=zh-cn)下载Android studio,也可以去AndroidDevTools(https://www.androiddevtools.cn/),里面有很多不需要翻墙就可以下载的工具。如果你是一名新手,注意安装Android studio的时候,安装界面选择"custom"选项,选择安装一下模块。

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM)
  • Android Virtual Device

然后,点击Next即可安装所选择的模块。安装完成后即可看到欢迎页面。

官方教程:https://developer.android.com/studio/install?hl=zh-cn

Android SDK

Android Studio默认会安装最新版本的Android SDK。你可以在Android Studio的SDKManager中选择安装各版本的SDK。


由于目前编译 React Native 应用需要的是Android 9 (Pie)版本的 SDK,所以在SDK Manager中选择"SDK Platforms"选项卡,然后在右下角勾选"Show Package Details"。展开Android 9 (Pie)选项,确保勾选了下面 Android SDK Platform 28 组件(重申你必须使用稳定的翻墙工具,否则可能都看不到这个界面)。

然后点击"SDK Tools"选项卡,同样勾中右下角的"Show Package Details"。展开"Android SDK Build-Tools"选项,确保选中了 React Native 所必须的28.0.3版本。你可以同时安装多个其他版本。

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

配置Android SDK环境变量

React Native需要通过环境变量来了解你的Android SDK装在什么路径,从而正常进行编译。
Mac上配置环境变量时经常要创建、编辑 .bash_profile文件,所以我们需要在.bash_profile中添加Android SDK的环境变量配置。

首先,在命令行中输入命令编辑.bash_profile,vim和vi都是文本编辑器,不了解的可以去http://www.runoob.com/linux/linux-vim.html 学习一下vim或者vi的使用。

vim/vi  ~/.bash_profile

然后,点击i进行编辑,添加以下配置。

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

Android Studio官方下载的SDK会放在$HOME/Library/Android/sdk下,如果是自定义下载的Android SDK,则需要更改ANDROID_HOME的值。

然后使用命令来使环境变量设置立即生效。

source $HOME/.bash_profile

创建项目

首先使用之前安装的React Native命令工具来创建一个新工程。

react-native init MyApp

使用visual studio code打开,目录如下:

然后准备Android设备,在这里可以使用usb连接Android真机,也可以使用Android模拟器,像genymotion、Android Virtual Device。使用真机需要打开开发者模式,并启动usb调试。

准备好设备后,进入到项目根目录中,cd MyApp,然后输入命令行运行程序。

react-native run-android

也可以使用Android Studio直接打开工程根目录下的Android程序,运行即可。

参考:

  目录