我们已经打开了src下的app.js文件，文件上部依旧是很多import，我们还看到了申明了一个store，并且有个configconfigureStore方法，但是这些都不是最重要的，我们在index.ios.js里面import的App，原来就是我们这里export的App类，这个类继承自react的Component组件
React Component
这里必须要介绍下Component，Component可以算是react-native构建App的基本元素，小的可以仅仅是一个Text,大的可以是整个Login,无论是react自带的控件类似(Text,Image,Button)还是我们自定义的控件都继承自Component来实现生命周期，从而达到界面渲染展示的效果。那么我们就稍微了解下Component从开始到最后到底都经历了些什么事件
如图，可以把组件生命周期大致分为三个阶段：
第一阶段：是组件第一次绘制阶段，如图中的上面虚线框内，在这里完成了组件的加载和初始化
getDefaultProps object getDefaultProps()
执行过一次后，被创建的类会有缓存，映射的值会存在this.props,前提是这个prop不是父组件指定的，这个方法在对象被创建之前执行，因此不能在方法内调用this.props ，另外，注意任何getDefaultProps()返回的对象在实例中共享，不是复制
getInitialState object getInitialState()
控件加载之前执行，返回值会被用于state的初始化值
第二阶段：是组件在运行和交互阶段，如图中左下角虚线框，这个阶段组件可以处理用户交互，或者接收事件更新界面；
第三阶段：是组件卸载消亡的阶段，如图中右下角的虚线框中，这里做一些组件的清理工作。
进入一个RN组件或者界面时，Component的声明周期函数大致流程如下：
1.constructor构造函数，从父级组件或者界面传过来的数据props在作为constructor的参数，在constructor中做一些初始化的操作，如props，state等初始化；函数原型：void constructor(props)
2.componentWillMount，只执行一次，第一次绘制组件(render)前触发该生命周期函数;函数原型：void componentWillMount()
3.render 绘制组件到界面上；函数原型：void render()
render的时候会调用render()会被调用
4.componentDidMount，第一次挥之组件(render)后触发该生命周期函数，触发该函数说明RN组件绘制已经完成了，虚拟DOM已经构建完成；从这个函数开始我们就可以和JS其他框架开始交互了，例如定时器，网络请求等操作。函数原型：void componentDidMount()
5.componentWillReceiveProps，当props发生变化时执行，初始化render时不执行，在这个回调函数里面，你可以根据属性的变化，通过调用this.setState()来更新你的组件状态，旧的属性还是可以通过this.props来获取,这里调用更新状态是安全的，并不会触发额外的render调用
6.shouldComponentUpdate，当组件属性（props）或者状态（state）发生变化时，都会触发该函数。函数原型：boolean shouldComponentUpdate( object nextProps, object nextState )；
若函数返回true，则继续触发componentWillUpdate，render，componentDidUpdate等方法；若函数返回false，则不做任何处理；
默认情况下，这个函数永远返回true用来保证数据变化的时候 UI 能够同步更新。在大型项目中，你可以自己重载这个函数，通过检查变化前后属性和状态，来决定 UI 是否需要更新，能有效提高应用性能。
7.componentWillUpdate，如果组件状态或者属性改变，并且上面的shouldComponentUpdate(object nextProps, object nextState)返回为true，则触发该方法，函数原型：void componentWillUpdate(object nextProps, object nextState)，函数中参数实际上与shouldComponentUpdate中的参数一样，是同一个数据源；
需要特别注意的是，在这个函数里面，你就不能使用this.setState来修改状态，否则会循环调用该函数导致堆栈溢出。这个函数调用之后，就会把nextProps和nextState分别设置到this.props和this.state中。紧接着这个函数，就会调用render()来更新界面了。
8.componentDidUpdate，更新render结束后，则调用该方法，函数原型：void componentDidUpdate(object prevProps, object prevState)；因为到这里已经完成了属性和状态的更新了，此函数的输入参数变成了prevProps和prevState。
9.componentWillUnmount，当组件要被从界面上移除的时候，就会调用componentWillUnmount()，函数原型：void componentWillUnmount();在这个函数中，可以做一些组件相关的清理工作，例如取消计时器、网络请求等。
React Native的生命周期就介绍完了，其中最上面的虚线框和右下角的虚线框的方法一定会执行，左下角的方法根据props state是否变化去执行，其中建议只有在componentWillMount,componentDidMount,componentWillReceiveProps方法中可以修改state值
组件(界面)构建：
请打开src/modules/Login/page/login.js
这里扩展一下，有时候import路径的时候会写成'xxxx/page' 而代替page/login.js 那是因为import会自动寻找page目录下的index文件,若page下没有index文件就需要补充完整的路径
看到组件Login中render函数return的组件展示。react-native提供了很多基础的组件给开发者，就像html里面的div,text和button一样，学习更多的基础组件请点击这里
我们假设你已经学习了大部分的常用组件，那么对于这些组件的自定义“渲染”和布局，react-native提供了自己的一套方式，他是类似css的一套stylesheet，我们可以对属性style进行赋值，赋值可以赋值为一个stylesheet，也可以直接书写渲染的细节，渲染的细节例如margin,padding,background等。
flexbox
对于布局来说，细心的朋友已经发现，我们在赋值margin，padding的时候不像css一样需要跟上单位px，这是因为react-native已经为我们做了很多事情，他不要求要px是因为react-native会自动根据当前的设备大小来进行计算，换而言之我们写的数字其实是一个比例。而就算是react-native已经提供了便利但是我们还是需要使用flexbox来更快速的进行界面布局，请点击这里
Dimensions
Dimensions是react-native提供的获取当前设备大小的方法，请点击这里
通过 Dimensions.get('window') 来获取{width,height}
习得了这么多组件和布局的知识，那么现在请修改下index.ios.js里面的代码练习一下吧
只有经过大量的有规范的练习才能让你的界面更加的优美和健壮，这里我分享下我从我web导师那里习得的布局经验 ====> 盒模型
web的程序员肯定不会陌生这个模型，它是我们浏览器基础。而react-native其实就是为了web开发者能适应的迅速开发app的框架，其实对于原生app的开发者来说，我们用和盒模型的思维来布局也会减轻今后修改界面而带来的布局麻烦，而不是一味单纯的通过A于B的marigin，padding来形成两者的关系。
1. “块”结构化你的界面
我们简单的拿github的登录界面来举例
可以看出github这个登录其实是有两个大块的，分别是“蓝色+绿色”的登录内容界面和“蓝色”的登录组件展示界面，“蓝+绿”作为整体，使得这个整体无论当前设备大小如何，外部的定位不会影响到内部组件的布局，同理"蓝"作为整体来控制组件展示的上下剧中位置。
2.抽象相同的位置属性
内部的“蓝”模块为整体，进一步抽象了几个组件之间的布局关系，他们拥有相同的margin-left 和margin-right,我们真正的组件其实就仅仅是“蓝”块中的Button,TextInput,Text，对于这些组件我们不需要额外的关注组件的left 和 right，只需要关注它的top和bottom，甚至你还可以再抽离一个块，来抽离它的top和bottom，那么我们这个块中的左上角，将会是我们所有组件的base position，所有的内部元素都会基于这个position进行布局。
优势：
这样做的好处是，在界面比较复杂的情况下避免改一处而伤经动骨，修改特定的布局只需要找到与之对应的“块”，修改组件和组件内部的对应位置只需要基于第一个组件的position来最相对位置，大大的健壮了我们程序布局
