ReactNative生命周期
屏幕快照 2020-05-26 上午9.20.21.png
从图看：在React Native中，组件的生命周期大致可以分为3个阶段（实例化阶段，存在阶段，销毁阶段）
实例化阶段函数功能分析
- getDefaultProps ：在组件中，我们可以利用this.props获取在这里初始化它的属性，由于组件初始化后，再次使用该组件不会调用getDefaultProps函数，所以组件自己不可以修改props，只可由其他组件调用它时再外部进行修改。
- getInitialState：该函数用于对组件一些状态进行初始化该函数不同于getDefaultProps,在以后的过程中，会再次调用，所以可以将控制控件状态的一些变量放在这里初始化,比如控件上显示的文字，可以通过this.state来获取值，通过this.setState来修改state值.注意：一旦调用了this.setState方法，组件一定会调用render方法，对组件进行再次渲染.
- componentWillMount： 组件将要被加载到视图之前调用
- componentDidMount: 在调用了render方法，组件加载成功并被成功渲染出来之后，所要执行的后续操作，一般都会在这个函数中进行，比如经常要面对的网络请求等加载数据操作等。
存在阶段函数功能分析
- shouldComponentUpdate:一般用于优化，可以返回false或true来控制是否进行渲染(true 的话进行下2步操作，false不会进行下去)
- componentWillUpdate: 组件刷新前调用
- componentDidUpdate：更新后
销毁阶段函数功能分析
-
componentWillUnmount 用于清理一些无用的内容，比如：定时器清除
生命周期方法调用：
屏幕快照 2020-05-27 上午11.20.41.png
使用Flexbox布局
一般来说，使用flexDirection、alignItems和 justifyContent三个样式属性就已经能满足大多数布局需求。
- Flex Direction：在组件的style中指定flexDirection可以决定布局的主轴。默认是竖直轴(column)方向（类似于x轴 y轴）
- row 水平轴方向排列，
- column 竖直轴方向排列。
- Justify Content：在组件的 style 中指定justifyContent可以决定其子元素沿着主轴的排列方式
- flex-start:主轴的起始端
- center ：主轴的中心
- flex-end：主轴的末端
- space-around：均分展示（左右边有边距）
- space-between：均分展示（左右边无边距）
- Align Items：决定其子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式
- flex-start：次轴的起始端
- center ：次轴的中心
- flex-end：次轴的末端
- stretch ：默认充满父元素空间（要使stretch选项生效的话，子元素在次轴方向上不能有固定的尺寸）
另：有一份网上总结的布局图解通俗易懂：
flexbox布局与传统web的css中flex布局区别
- flexDirection在ReactNative中默认是竖直轴（column）方向，但在传统css中默认是横轴（row）方向
- flexbox布局中使用flex布局，父元素固定宽或高，设置display：flex，在ReactNative中设置子元素的宽或高不能超过父元素，或者不设置。如果超过父元素就不会均分布局。但是在传统css中如果子元素的尺寸超过父元素的话也是可以均分布局的。
