React-native之环境搭建（1）

简介

React-native是Fackbook开源的一个技术，旨在用JS及react代码开发app,提倡组件化开发，给我们提供一个个封装好的组件供我们调用，强调learn once,write everywhere.
github地址:https://github.com/facebook/react-native
react-native中文网地址:http://reactnative.cn/docs/0.40/getting-started.html

安装步骤

这里只说基于Android 的在Windows上的环境搭建.

1.安装JDK

相信做android开发的电脑上本来就安装有Java开发环境，这里不多介绍
JDK下载官网http://www.oracle.com/technetwork/java/javase/downloads/index-jsp-138363.html

2.安装SDK

因为国内网的原因，建议使用镜像代理http://androiddevtools.cn/

3.安装C++环境

可以选择Windows SDK、cygwin或mingw,Microsoft Visual c++等其他C++环境。编译node.js的C++模块时需要用到。

4.安装Node.js与Git

node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统
Node.js下载地址：https://nodejs.org/en/download/
Git下载地址:https://git-for-windows.github.io/

建议设置npm镜像以加速后面的过程（或使用科学上网工具）。

设置全局使用指定的镜像
打开git-cmd.exe,直接在命令行内输入：

npm config set registry https://registry.npm.taobao.org

npm config set disturl https://npm.taobao.org/dist

5.安装React Native命令行工具

已经在Github上下载react-native代码的情况
比如我的react-native代码在D://RN_software文件夹下，
进入到根目录
D:\RN_software>cd react-native-master
进入到react-native-cli文件夹
D:\RN_software\react-native-master>cd react-native-cli
执行安装操作
D:\RN_software\react-native-master>cd react-native-cli>npm install -g react-native-cli

6.创建项目

比如我在D:\RN_software\app_project创建文件夹用于放置工程项目
进入目录
D:\RN_software\app_project>react-native init FirstDemo

注意一定要驼峰式命名，首字母大写

7.运行packager 进入工程目录

react-native start
可以用浏览器访问http://localhost:8081/index.android.bundle?platform=android看看是否可以看到打包后的脚本

8.准备模拟器或真机 运行android

react-native run-android

success.png

9.修改后重新加载

修改代码之后不需要重新运行程序，可以Reload就行，以下两种方式开启
1.Android 5.0以上及更高版本，可以使用adb reverse命令
连接设备，usb在调试模式，执行
adb reverse tcp:8081 tcp:8081 这样就可以使用开发选项了
2.Android 5.0以下版本可以通过Wifi连接

• 手机和电脑连接并且两个设备在同一个Wifi网络环境下
• 采用react-native run-android运行应用
  如果屏幕出现红色没有连接Server,则进行以下操作
• 摇晃设备或者命令行输入adb shell input keyevent 82，打开开发者菜单
• 点击Dev Settings进入，然后选择Debug server host & port for device
• 输入电脑的IP地址和端口号
• 回到开发者菜单，然后选择点击Reload JS

Android设备已经去除了Menu按键了，这时候我们可以通过摇晃设备来进行打开菜单,然后完成应用的重新加载，调试以及其他功能
正常情况下我们可以双击R键，就可以Reload重新加载，但是如果我们修改Android项目中的资源文件(例如res/drawable文件中图片)或者修改Android的源代码，那么就需要重新编译生成应用才可以生效。

可能遇到的问题
问题：找不到sdk 或者 无法正常化 sdk路径 解决办法：正确配置环境变量

问题：failed to find target with hash string 'android-23' in: F:\Android_SDK 解决版本：更新23版本的sdk

问题：build成功后是红色的：没有连接服务器js Server
解决方法：ip地址+8081端口 例子：192.168.1.104:8081