本文对react-native中文网搭建开发环境进行相关的补充，帮助各位读者搭建自己的react-native 开发调试环境。IOS 集成度高安装相对比较容易，android开发环境对没有接触过安卓原生开发的初学者相对来说会难一点。
看过react-native 中文网教程的，但是想用genymotion做模拟器的请直接移步到(2).安卓开发环境 - 2.安装Android Studio
一、安装react-native
1.安装Homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2.安装Node
brew install node
3.npm镜像换源
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
4.Yarn、React Native的命令行工具（react-native-cli）
npm install -g yarn react-native-cli
5.安装Watchman与flow
brew install watchman
brew install flow
二、IOS以及android + genymotion开发环境搭建
(1).IOS 开发环境
1.安装 xcode
很简单打开电脑的appStore 输入Xcode 等它下载完成即可。
2.安装Iphone模拟器
xcode->prerences->components 选择要安装的IOS系统模拟器即可，这里装的是IOS 9的模拟器根据你们的实际需要下载。
Paste_Image.png
Paste_Image.png
3.检查IOS环境时候成功
打开Xcode 新建一个工程
Paste_Image.png
Paste_Image.png
输入工程相关信息
Paste_Image.png
选择工程存放路径
Paste_Image.png
双击我们添加的Lable控件即可改成我们自己想要显示的名称了，我们这里输入hello IOS.
我们再看到下图箭头所指的位置，选着我们要运行工程的模拟器即我们上面装的IOS 9 模拟器。再点击左边的运行即可。
Paste_Image.png
运行效果：
Paste_Image.png
OK！IOS的开发环境到这里就搭建完了，非常简单。
(2).安卓开发环境
部分网页需要番羽墙，可以使用相关的番羽墙软件，或者用配置hosts的方式来处理。
笔者之前用的lantern 番羽墙软件，有流量限制。就没用了，现在用的是配置hosts的方式。
老D博客hosts持续更新帖
苹果Mac OS系统修改Hosts文件的方法
hosts文件在哪？什么修改？另附Windows7/8/10 Mac/iPhone原版hosts文件
配置完成后，访问下打开浏览器访问google能连接便表示配置成功了。
1.安装JDK
Android Studio需要Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version
来查看你当前安装的JDK版本。如果版本不合要求，则可以到 官网上下载。
2.安装Android Studio
这部分可以直接参考react-native 中文网 搭建环境 Android Studio这一节。不同的是这边笔者选择的是标准安装。
Paste_Image.png
官方选着的是自定义模式并勾选了IDE自带的虚拟机。如果说不需要安装genymotion 安卓模拟器的话，可以参照官方的配置流程。
比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择，但它只对个人用户免费。
要安装genymotion的话，我们继续往下。
3.安装genymotion
genymotion
比起Android Studio自带的原装模拟器，Genymotion是一个性能更好的选择，但它只对个人用户免费。
1.下载和安装Genymotion。
2.打开Genymotion。如果你还没有安装VirtualBox，则此时会提示你安装。
下载安装后，点击ADD下载安卓虚拟设备。
Paste_Image.png
第一登录需要登录，使用你在genymotion 注册的帐号即可看到如下界面
Paste_Image.png
笔者下的是这个
一直下一步到这个界面，不得不说这个下载真心慢。
Paste_Image.png
3.1这里告诉大家一个genymotion虚拟机快速下载的方法：
查看genymotion软件打印的数据找到文件下载地址，复制后用迅雷下载。
3.1.1 查看模拟器地址
Paste_Image.png
这里笔者的路径是
/Users/userName/.Genymobile/Genymotion/deployed/,复制路径的前部分 /Users/userName/.Genymobile打开终端
Paste_Image.png
cd /Users/username/.Genymobile/Genymotion
ls -all
Paste_Image.png
open -e genymotion.log //使用文本编辑器打开
Paste_Image.png
复制地址使用迅雷下载速度杠杠的。
Paste_Image.png
下载完后需要将下载的文件放入
/Users/userName/.Genymobile/Genymotion/ova/路径中去，这时候你在设备这一栏是看不到刚刚下的设备的，怎么办？重启genymotion 点击'+' 再选中刚刚选的设备，点击下一步，因为上面已经下好了，软件马上就会显示我们刚刚下载的设备。
Paste_Image.png
这时候我们马上就可以看到我们下载的设备了。
4.Android Studio以及genymotion环境配置
4.1安装genymotion插件
Paste_Image.png
Paste_Image.png
Paste_Image.png
创建一个基本工程，看下我们的插件安装好了没有。
Paste_Image.png
Paste_Image.png
一直下一步到看到主页面为止。
插件安装成功后会在主界面多出一个genymotion模拟器图标。
Paste_Image.png
4.2安装ndk
Paste_Image.png
点击install NDK等待安装完即可，IDE会自动配置ndk的默认路径。
这里需要注意下sdk路径和ndk路径，接下来运行安卓模拟器的时候会用到
打开genymotion 配置ADB路径，即上面标注的路径。
4.3配置ANDROID_HOME环境变量 和 Android SDK的Tools目录添加到PATH变量中
输入以下指令
cd ~
open -e .bash_profile
如果没有.bash_profile 可以用：
touch .bash_profile 新建一个
source .bash_profile
再打开的文件(.bash_profile)中输入：
ANDROID_HOME=~/Library/Android/sdk
PATH=$PATH:$ANDROID_HOME/tools:$ANDROID_HOME/platform-tools
Paste_Image.png
4.4 配置genymotion模拟器为工程运行虚拟机
Paste_Image.png
一直下一步，知道再次点击运行，模拟器这行有设备即可。
选择OK，
到此为止所有的开发环境就搭建成功了。
react-native init Demo
npm install
cd ./android
vim local.properties
cd ../
react-native run-android
问题集
1.react-native run-android 不会像 run-ios一样自动帮你开启模拟器，需要手动打开模拟器后再使用 run-android
2.> SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.
Paste_Image.png
cd ./android
vim local.properties
输入ndk sdk路径
sdk.dir=/Users/wangchenlong/Installations/android-sdk
ndk.dir=/Users/wangchenlong/Installations/android-ndk-r10e
网友评论