想要开发App,首先要做的就是搭建开发环境,因为App的调试、编译、打包都需要原生的开发环境作为支持,如果环境没有搭建好,开发App无从谈起。
开发App与开发web相比首先是设备要求较高,由于IOS开发需要安装XCode工具,所以我们的开发操作系统必须是苹果系统。而app模拟器的运行是比较占用内存和系统资源的,尤其是在调试的时候需要同时运行Android Studio和Xcode两个开发工具和android、ios两个模拟器,同时还有可能需要打开多个终端窗口。因此建议大家选购性能较强的macbook pro,至少8g内存以上的版本。如果经济比较紧张的话可以选购性价比更高的mac mini,不过需要外接键鼠和屏幕。解决了设备要求,我们可以开始搭建开发环境了。
一、搭建开发环境:
1、homebrew
Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件。
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
译注:在Max OS X 10.11(El Capitan)版本中,homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复:
sudo chown -R `whoami` /usr/local
homebrew是mac平台的常用工具,大家可以安装下来以备不时之需。在这里安装homebrew是为了安装后面的nodejs,但其实不用homebrew也可以安装nodejs
2、Node
使用Homebrew来安装Node.js.
React Native目前需要NodeJS 5.0或更高版本。本文发布时Homebrew默认安装的是最新版本,一般都满足要求。
brew install node
安装完node后建议设置npm镜像以加速后面的过程(或使用科学上网工具)。注意:不要使用cnpm!cnpm安装的模块路径比较奇怪,packager不能正常识别!
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
我们这里也可以直接通过进入nodejs的官网,点击下载安装包进行下载安装
3、Yarn、React Native的命令行工具(react-native-cli)
Yarn是Facebook提供的替代npm的工具,可以加速node模块的下载。React Native的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。
npm install -g yarn react-native-cli
安装完yarn后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
如果你看到EACCES: permission denied
这样的权限报错,那么请参照上文的homebrew译注,修复/usr/local
目录的所有权:
sudo chown -R `whoami` /usr/local
安装完yarn之后就可以用yarn代替npm了,例如用yarn
代替npm install
命令,用yarn add 某第三方库名
代替npm install --save 某第三方库名
。
yarn在安装依赖时速度比npm更快,而且yarn在安装依赖时可以锁死依赖的版本,包括依赖本身所依赖的依赖版本。可以避免很多未知的安装错误。所以在其他项目中也可以使用yarn来代替npm
二、安装开发工具
1、Xcode
React Native目前需要Xcode 8.0 或更高版本。你可以通过App Store或是到Apple开发者官网上下载。这一步骤会同时安装Xcode IDE和Xcode的命令行工具。
虽然一般来说命令行工具都是默认安装了,但你最好还是启动Xcode,并在
Xcode | Preferences | Locations
菜单中检查一下是否装有某个版本的Command Line Tools
。Xcode的命令行工具中也包含一些必须的工具,比如git
等。
由于是在mac平台,Xcode的安装比较简单,就不多做介绍了。而在window环境安装不了Xcode,因此只能放弃ios的开发了。
2、Android Studio
React Native目前需要Android Studio2.0或更高版本。
Android Studio需要Java Development Kit [JDK] 1.8(暂不支持更高版本)。你可以在命令行中输入
javac -version
来查看你当前安装的JDK版本。如果版本不合要求,则可以到 官网上下载。
Android Studio包含了运行和测试React Native应用所需的Android SDK和模拟器。
除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了
Android Support Repository
,而这也是React Native必须的(否则在react-native run-android时会报appcompat-v7包找不到的错误)。
安装过程中有一些需要改动的选项:
- 选择
Custom
选项:

- 勾选
Performance
和Android Virtual Device

- 安装完成后,在Android Studio的启动欢迎界面中选择
Configure | SDK Manager
。

- 在
SDK Platforms
窗口中,选择Show Package Details
,然后在Android 6.0 (Marshmallow)
中勾选Google APIs
、Android SDK Platform 23
、Intel x86 Atom System Image
、Intel x86 Atom_64 System Image
以及Google APIs Intel x86 Atom_64 System Image
。

- 在
SDK Tools
窗口中,选择Show Package Details
,然后在Android SDK Build Tools
中勾选Android SDK Build-Tools 23.0.1
(必须是这个版本)。然后还要勾选最底部的Android Support Repository
.

以上需要选择的安装版本都是必须选上的,如果有所遗漏的话,react-native的安卓版本是无法成功编译和运行。而如果你在react-native中引入了react-native-video、react-native-audio、react-native-image-picker等插件的话可能还需引入其他模块,在编译的时候,android-studio会提示哪些模块缺失,你只需要根据提示将其正确安装就行了。
ANDROID_HOME环境变量
确保ANDROID_HOME
环境变量正确地指向了你安装的Android SDK的路径。具体的做法是把下面的命令加入到~/.bash_profile
文件中:(译注:~表示用户目录,即/Users/你的用户名/
,而小数点开头的文件在Finder中是隐藏的,并且这个文件有可能并不存在。请在终端下使用vi ~/.bash_profile
命令创建或编辑。如不熟悉vi操作,请点击这里学习)。如果你的命令行不是bash,而是例如zsh等其他,请使用对应的配置文件。
# 如果你不是通过Android Studio安装的sdk,则其路径可能不同,请自行确定清楚。
export ANDROID_HOME=~/Library/Android/sdk
然后使用下列命令使其立即生效(否则重启后才生效):
source ~/.bash_profile
可以使用echo $ANDROID_HOME
检查此变量是否已正确设置。
安卓模拟器
安装完毕Android Studio后还需要安装安装模拟器,因为App是需要跑在模拟器中的,默认情况下Android Studio没有安装模拟器,需要手动进行安装:


如图所示可以创建想要的模拟器。
创建好模拟器后,基本表示安卓开发环境搭建完毕
三、将react-native项目跑起来
1、安装react-native-cli
npm i react-native-cli -g
2、初始化react-native项目
react-native init AwesomeProject
3、将初始化的RN项目跑起来
cd AwesomeProject
react-native run-android
react-native run-ios
将RN项目跑起来的前提条件是:成功的安装Xcode和Android Stutio以及相关的模拟器。
如果在run的时候出错可以使用Xcode和Android Stutio打开项目,点击编译查看具体的错误信息。可能是依赖没装好,也有可能是工具安装不全面,根据提示完善相关安装就行了。
Xcode里面找菜单Product-->Build或者快捷键cmd+b完成编译

AndriodStudio直接点击这个图标或者快捷键cmd+f9完成编译

至此,一个干净的reactnative项目构建完毕,开发者可以基于已经完成初始化的AwesomeProject项目进行扩展和开发属于自己的原生App。
网友评论