一、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部分拆分
参考网址: