一、准备工作
在ReactNative中文网上有详细的开发文档与教程,首先,想要系统了解ReactNative的朋友可以在如下网站中获取详细信息:
本篇博客记录搭建ReactNative开发环境中的一些问题与注意点,也介绍在MacOS系统上搭建ReactNative开发环境的全过程与一些小经验技巧。
ReactNative最大的魅力在于其编写的代码可以跨平台应用,因此我极力推荐在MacOS上进行ReactNative应用的开发,由于Xcode开发工具只能运行与MacOS系统,在Windows或Linux系统上将无法进行iOS平台的调试,因此本篇博客也将基于MacOS系统进行演示。
在ReactNative环境之前,开发者需要先安装一些小工具,首先需要安卓Homebrew工具,Homebrew工具是Mac系统的包管理器,在终端运行如下命令进行安装:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
安装完成后,可以使用brew -v命令检查Homebrew版本,正常输出版本号说明安装成功:
在安装过程中,如果遇到权限问题,需要使用如下命令进行修复:
sudo chown -R `whoami` /usr/local
安装完成Homebrew后,需要使用其来进行Node环境的安装,使用如下命令:
安装完成后,同样可以使用node -v命令来检查是否安装成功:
虽然Yarn是facebook提供的代替npm的包管理工具,但我个人更倾向使用npm来进行ReactNative包的安装,在使用之前,可以通过替换源镜像的方式来进行npm的加速(在无法科学上网的前提下):
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
之后使用npm config get registry来检查源镜像的替换是否成功:
之后我们需要安装ReactNative的命令行工具react-natice-cli。这个工具用来初始化ReactNative项目,命令如下:
npm install -g react-native-cli
使用react-native -v命令来检查是否安装成功:
到此,ReactNative的基础环境已经搭建完成了,下面需要配置iOS与Android开发工具。
二、Xcode与Android Studio配置
Xcode基本无需进行额外的配置,你只需要从AppStore上下载下来最新版本的Xcode开发工具安装完成即可,Xcode会打包安装命令行工具,git工具和所需要的模拟器。
对于Android开发环境,首先你需要保证你的Android Studio工具版本在2.0以上并且Java版本要在1.8以上,javac -version命令可以查看当前的JDK版本,如果低于1.8,可以到官网下载:
官网:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html。
下载安装完成Android Studio后,首先需要对SDK进行相应配置,打开Android Studio,打开欢迎界面的SDK Manager,如下图:
选中其中的SDK Platforms,勾选Show Package Details。我选择Android6.0相关的SDK进行安装,Android SDK Platform 23,Intel x86 Atom_64 System Image为必选, 如下图所示:
除此之外,还需要安装SDK Tools,必须安装其中的23.0.1版本,切记,这是必须!如下图:
之后随便使用Android Studio创建一个项目,打开其中的AVD Manager,如下:
AVD Manager用来管理Android模拟器,如果以后模拟器,可以点击运行按钮开运行模拟器,如果没有,可以创建一个模拟器,如下图:
做完上述步骤后,切记要配置Android SDK的环境变量,在终端使用如下命令进行环境变量文件的编辑:
sudo vi ~/.bash_profile
在文件中添加如下路径:
export ANDROID_HOME=~/Library/Android/sdk
之后在终端执行如下命令来使设置生效:
source ~/.bash_profile
可以使用echo $ANDROID_HOME命令来检查环境变量的配置是否正确,如下: