背景
我是一名程序员，做了6年PHP 开发，也陆陆续续使用过Python作为辅助。当然，由于是小规模团队，所以也属性Javascript，HTML5等，算是有一定的基础在。
React Native的兴起，使大部分没接触过Java和Object-c/swift的程序员也能开发常用的APP应用，随着需求的增长，我们也逐渐需要开发对应的APP，于是开始加入React Native大军，由于网上的资料多半是属于教程类，遇到问题很难解决，再加上Debug机制与以前使用的PHP和Python不太一样，导致调试困难，固写此文做记录，以免在之后的开发中遇到类似问题。坑太多，大神太少，这里赞一下极光的客服人员，回复快速热心，同时也感谢所有在我开发过程中给我提供帮助的好心大神。
一、环境搭建
React Native 是可以跨平台开发APP应用，由于我初入React Native，所以我分别在Window 7和Mac安装了环境
1） Android
安卓环境是需要NodeJs和 JAVA的JDK以及JRE还有ANDROID SDK，这些环境的安装，网上有一大堆教程，而且流程比较多，固不在此文详细介绍，我提供以下链接供萌新参考：
NodeJs安装：http://blog.csdn.net/u010255310/article/details/52205132
Java环境安装： http://blog.csdn.net/u012934325/article/details/73441617
Android SDK安装：http://blog.csdn.net/love4399/article/details/77164500 注意，可以不用安装eclipse，只看SDK就好了。
值得注意的是，最开始我并不知道Android SDK和React Native的关系，所以本着不报错的原则，我下载了各个版本的 SDK Tools，Build-tools，Platform，Support等，然而，确实是没有报错，但是我安卓模拟器会经常在使用scrollView等组件的时候卡死，我以为是我代码有问题，后经群里的一个大神提醒，React Native官方有说明，RN 的SDK Build-tools 最好的版本是23.0.1，模拟器的版本最好用最新的，当然，大神用的是Android 7.0 也就是API version 24，所以我也用了这个版本，并且大神说版本向下兼容，打包不会出现问题，确实也没什么问题，无论是模拟器上调试APP还是真机测试都不再卡死也很流畅。
所以，Android SDK只需要安装需要使用的即可。
以下是我的Android SDK安装的Packages，部分是RN插件需要用到的
Android SDK Tools Rev.: 25.2.5
Android SDK Build-tools Rev.:25.0.2
Android SDK Build-tools Rev.:23.0.2
Android SDK Build-tools Rev.:23.0.1
SDK Platform Rev.: 27
Android 7.1 (API 25) 下的子项全部安装，因为我模拟器是安卓7.1，所以你的模拟器版本是多少，就安装对应版本下的子项。
Extras:(这下面我是全部勾选安装了的)
Android Support Repository Rev.:47
Android Support Library Rev.:23.2.1
......
至此，环境安装完毕，这时我们需要安装react-native
由于国外的npm包管理器很慢，所以我们需要用到国内淘宝的npm包镜像：
执行以下命令：
npm configsetregistry https://registry.npm.taobao.org
然后执行命令安装React native：
npm install -g react-native-cli
如果没有错误，就安装成功了，如果出现错误，那说明基础环境配置有问题
然后就可以开始创建属于你的React Native项目：
cd (你的项目所在路径) 例如：
cd E:/reactDemo/
然后
react-native init (你的APP名称)
成功后，该目录下会生成 APP名称的文件夹，这就是React Native的项目文件
该文件夹下包含：
android 、ios、node_modules、index.js、App.js等文件
然后进入项目app目录运行（cd e:/reactDemo/你的APP项目名）
react-native start
新开一个cmd控制台
进入项目app目录运行
react-native run-android
我在运行时，遇到了找不到bundle包文件，我起初是以为自己没生成，于是按网上的教程打了一个离线包，然而同样提示 找不到 index.android.bundle，后来半天我才反应过来，网上的教程全是让新在 index.android.js里面注册app，实际上新版本的react native只有一个index.js，同样，bundle也是 index.bundle，所以当然会提示找不到index.android.bundle，网上教程不适用于新版RN，需要特别注意
当run-android运行后，会报错，为什么呢，因为没有连接设备，所以我们需要连接一台设备（虚拟机/真机）
我使用的模拟器是Genymotion模拟器，下载了一个 Google Nexus 6P-7.1.0 API 25 的系统安装上，再控制台进入android sdk目录下的platform-tools目录，运行：
adb devices
获得 Genymotion的端口
127.0.0.1:5555 device
adb connect 127.0.0.1:5555
之后，模拟器便连接成功了，然后重新运行run-android命令，模拟器上会自动安装RN应用并启动：
由于我做了很久，所以我依稀记得风神模拟器是必须要配置IP的，但我用了genymotion后好像并不需要配置IP和端口，所以如果你安装出现报错：
could not connect to development server.
那么你需要摇晃手机或使用模拟器上摇晃手机的按钮，然后弹出开发者菜单，选择 Dev settings.
然后点击 Debug server host & port for device
填写你的react native 环境的IP地址以及端口8081，例如我RN环境IP是192.168.3.* 虚拟机是192.168.122.* 那么我需要设置 192.168.3.*:8081 具体根据你的实际IP来设置
做完以上操作，再次通过开发者菜单 reload js，即可看到正常的页面：
Welcome to react native.
至此，安卓环境配置完成
2）IOS
IOS下需要安装Xcode、Xcode Command、HomeBlew、NodeJs、watchman、flow
同时你需要拥有一个苹果开发者帐号，我是使用的企业开发者帐号：688的，所以我并不确定免费开发者是否也能完成后续的操作，但仅开发模式而言是没问题的，主要是签名证书这块可能会有问题。
安装完Xcode后，我并没有安装Xcode Command，导致后面出现错误，所以这里应该先安装 Xcode Command，本来我是按照网上的教程
xcode-select --install
运行了这个命令，然而，Xcode提示我并不能下载（EXO ME?），试过很多次都不行，网上也没相关资料，但安装不了就一直编译报错，我实在没办法，最后终于在网上找到一个资料说在苹果开发者后台的download下有该工具，于是赶紧打开开发者中心 developer.apple.com 去下载了一个对应的command(这里是需要根据你mac的IOS版本和XCode进行选择下载的)
下载了苹果的xcode-command安装包后安装完成。
注意：如果以上步骤或以下步骤出现无法操作目录的错误的话，则需要提供管理员权限，有两种方法，一种是 sudo + 命令（例如 sudo brew install node），一种是取得切换为root用户 sudo -s 然后输入密码后切换为root账户
然后安装 HomeBlew
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
然后安装NodeJS
brew install node
安装Flow
brew install flow
然后修改npm包镜像
npm install --registry=https://registry.npm.taobao.org
然后安装React Native
npm install -g react-native-cli
安装完成后，就可以创建你的应用啦
react-native init (你的APP名称) // 注意注意注意！！！！请一定不要使用sudo创建，也不要用管理员权限创建，否则后续会出现找不到或无法访问目录的错误，在init时，请使用 chown -R whoami /usr/local 和 你的账户下面的一个文件夹获取权限，否则会出现权限带来的各种错误，请一定注意
然后运行：
react-native run-ios
就可以自动启动模拟器并安装APP了，这里你可以在Xcode里面设置模拟器机型，IOS SDK版本以及 bundle ID等信息，我们后面会讲到
至此，IOS环境搭建完毕
网友评论