一、React Native Android Win7开发环境配置
React Native可以让你使用Javascript开发出具有原生效果的移动应用，在多个平台中可以高度复用相关业务模块，提高多平台的开发效率，值得学习研究。
Learn once, write anywhere
1.使用软件：
搭建React Native Android开发环境需要以下软件：
Android Sdk、Android Statio、Jdk、Nodejs、Android Ndk(可选)、Git（可选） 软件到官方网站下载最新版本即可，其中可选下载是对React Native源码环境部署才会用到，相关网站如下：
Android官方网站：developer.android.com/develop/ind…
Jdk官方网站：
Nodejs官方网站：nodejs.org/en/
Git官方网站：git-scm.com/download/wi…
2.环境变量配置：
2.1.Java环境变量配置
Jdk以全部默认选择进行安装，待安装完成以后按以下步骤操作
- 2.1.1 右击【我的电脑】--->【属性】----->【高级】--->【环境变量】
- 2.1.2 新建系统变量，创建变量名为JAVA_HOME，变量值为jdk安装目录
- 2.1.3 新建系统变量，创建变量名为CLASSPATH，变量值为【.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;】
- 2.1.4 修改Path系统变量值，将【%JAVA_HOME%\bin;】加入到变量值最前面部分
- 2.1.5 验证jdk是否配置成功，在DOS命令窗口输入【java -version 】
2.2.Android Sdk环境变量配置
新建系统变量，创建变量名为ANDROID_HOME,变量值为Android Sdk安装目录 修改Path系统变量值，将【%ANDROID_HOME%;】加入到变量值最前部分
2.3.Android Ndk环境变量配置
新建系统变量，创建变量名为ANDROID_HOME,变量值为Android Ndk安装目录 修改Path系统变量值，将【%ANDROID_NDK%;】加入到变量值最前部分
上面相关操作完成以后，需要根据你自己的网络环境决定是否需要配置相关代理。
设置公司npm代理
npm config set registry =
npm config set proxy=
给gradle设置代理，gradle.properties文件中设置如下
systemProp.http.proxyHost= systemProp.http.proxyPort= systemProp.https.proxyHost= systemProp.https.proxyPort=
设置Android SDK代理
设置gradlew offline工作
3.运行起第一个官方的项目：
npm install -g react-native-cli
react-native init AwesomeProject
在react-native init使用此命令时如果不能创建成功，可以把网络切换到Tencent-StaffWiFi环境下，再使用此命令
在AwesomeProject 中会包含以下内容如图所示：
cd AwesomeProject ，然后shift+鼠标邮件，选择在此处打开命令窗口
react-native start
我们使用Android Statio打开文件中的android项目
运行android项目，
摇动手机或按下菜单按钮呼出菜单，然后点击 【DeviceID Settings】 菜单项进入应用的选项界面，再点击 【Debug server host for device】 选项，填入你的主机的 ip 和端口号 ，格式为：XXX.XXX.XXX.XXX:XXXX 在这里的网络环境，如果不行可以将本地网络断开，然后开启WIFI热点，手机连上wifi热点，那么reload js就可以成功了。
打开index.android.js，内容如下，我可以从这里开始写React代码，写完都不用重新打包APK，reload js应用就可以更新
二、ReactNative UIExplorer 应用分析
官方给出UIExplorer 应用展示目前全部的UI和功能组件，通过该应用源码可以看出React Native的使用，通过读源码会发现里面会使用一些ES6和ES7的新特性，所以在分析之前必须得去了解ES6和ES7的语法。
上图是根据源码分析画出图，通过此图我们可以了解到该应用的全局构成，UIExplorerList管理了全部的UI和功能组件，通过UIExplorerListBase中的ListView的onpress方法切换不同功能组建，createExamplePage会渲染出所选择的UI及功能组建视图，在下图中去掉了TextExample中对UIExplorerBlock和UIExplorerPage的使用关系，因为例子中的使用关系我们可以通过export方式来实现。
UIExplorerApp 是应用的入口，整个项目的启动的文件。
他会render出DrawerLayoutAndroid，抽屉（通常用于导航切换）是通过renderNavigationView方法渲染的，并且DrawerLayoutAndroid的直接子视图会成为主视图（用于放置你的内容）。
renderNavigationView此方法用于渲染一个可以从屏幕一边拖入的导航视图。
getInitialState 获得初始化组件状态，只调用一次
componentWillMount：组件将要加载，只调用一次
componentDidMount 组件加载完成并显示出来了，也就是完成了一次绘制，只调用一次
render：绘制组件，可能调用多次。
在React的工作流程中，setState会触发一次重绘
class UIExplorerList extends React.Component 这是ES6的新语法实现继承
这个类requrie应用的全部UI组建和功能，并注入到封装的UIExplorerListBase类中，作为ListView的datasource
并通过UIExplorerListBase.makeRenderable(example)方法切换到对应的UI组建或者功能界面
UIExplorerListBase通过ListView渲染了主页面的带有搜索的界面，并且当事件中调用了makeRenderable方法会example.examples ? createExamplePage(null, example) : example。 createExamplePage会渲染出UI组件或者功能页面，createExamplePage分别由UIExplorerBlock和UIExplorerPage组成 UIExplorerPage中使用了ES6的特性 import type { Example, ExampleModule } from 'ExampleTypes'; UIExplorerPage中使用了ES7的特性 对象的扩展运算Object Spread: var extended = { ...obj, a: 10 };
按照UIExplorer的结构，UI组建和功能有两种开发方式，一种require UIExplorerBlock，UIExplorerPage两个类，另一种直接export
GeolocationExample分析： 获取地理位置新这里是使用的html5标准中的navigator.geolocation中的方法来进行的。 定义模块信息
暴露组件信息
组建布局渲染
三、ReactNative 组件生命周期
ReactNative Android组件是拥有生命周期的，整个生命周期如下图所示：
getDefaultProps() 在组建类创建的时候调用一次，然后返回值被缓存下来。 该方法在任何实例创建之前调用，并且返回对象将会在实例间共享。
getInitialState() 在组件挂载之前调用一次，返回将作为this.state的初始值
componentWillMount() 在初始化渲染执行之前立即调用一次，如果该方法内调用setState，render将会更新state。
render() 该方法是必须的，当调用该方法时会检测this.props和this.state，返回一个单子组件，该组件可以是虚拟本地化dom组件也可以是复合组件。 如果返回null或者false表明不需要渲染任何东西。 render()函数内不应该修改组件的state，每次调用都返回相同的结果，不读写DOM信息，不和浏览器交互，这些操作可以放入在其他生命周期回调函数中执行。
componentDidMount() 在初始化渲染执行之后立即调用，这时组建已经拥有一个DOM展现，可以通过this.getDOMNode()来获取相应DOM节点。
componentWillReceiveProps() 在组建接收到新的props的时候调用，初始化渲染的时候该方法不会被调用。
shouldComponentUpdate() 在接收到新的 props 或者 state，将要渲染之前调用。该方法在初始化渲染的时候不会调用，在使用 forceUpdate 方法的时候也不会。 如果确定新的 props 和 state 不会导致组件更新，则此处应该 返回 false。
componentWillUpdate() 在接收到新的props或者state之前立即调用，在初始化渲染的时候该方法不会被调用，使用该方法做一些更新之前的准备工作。
componentWillUnmount() 在组建从DOM中移除的时候立即被调用。
了解上述生命周期的过程以后，再结合UIExplorer应用看看Android ReactNative的生命周期过程是怎样的，整个UIExplorer应用什么周期过程会分为打开进入应用，点击Image进入ImageExample页面，再按back建返回主界面。 初次打开UIExplorer应用，纵观整个过程我们发现涉及到的相关类有UIExplorerApp、UIExplorerList、UIExplorerListBase、UIExplorerPage。
进入ImageExample，纵观整个过程我们发现涉及到的相关类有UIExplorerApp、UIExplorerList、UIExplorerListBase、createExamplePage、ImageExample、UIExplorerPage。
待研究 应用耗电量 组件挂载后内存变化 Native和JS部分拆分
参考网址：
185
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
