从零学React Native之06flexbox布局.docx

从零学React Native之06flexbox布局
　　什么是flexbox布局
　　React中引入了flexbox概念,flexbox是属于web前端领域CSS的一种布局方案，是2009年W3C提出了一种新的布局方案，可以简便、完整、响应式地实现各种页面布局。你可以简单的理解为flexbox是CSS领域类似Android中 LinearLayout的一种布局，但是要比 LinearLayout要强大的多。
　　React Native中对Web端的FlexBox进行了阉割,以用来适应移动设备。
　　RN利用flexBox模型布局, 也就是在手机屏幕上对组件进行排列.利用flexBox模型,开发者可以开发出动态宽高的自适应的UI布局。
　　我们前面介绍过View,Text等组件的一些属性设置了,RN强大的UI布局能力主要是通过各个不同组件的样式(style)属性中的各个键的设置来实现的。大部分组件的style都支持flexbox布局。
　　下面就是我们常见的布局的写法：
...
class AwesomeProject extends Component {
render() {
return (
<View style={styles.container}> //根View
<View style={styles.test1}/> // 子View
<View style={styles.test2}/> // 子View

</View>
);
}
}

const styles = StyleSheet.create({
container: { //根View样式
flex: 1,
backgroundColor: '#F5FCFF',
},
test1:{ // 子View样式
width:360,
height:60,
backgroundColor:'red'
},
test2:{ //子View样式
width:40,
height:40,
backgroundColor:'blue'
}
});
　　flexbox中的样式主要有以下几类:
　　位置及宽、高相关的样式键
　　容器属性,决定子组件排列规则的键
　　元素属性,决定组件显示规则的键
　　边框、空隙与填充
　　位置及宽、高相关的样式键
　　位置主要是postion、 top 、bottom、 left、 right 几个属性
　　首先讨论position键。它是字符串类型，取值包括 relative(默认)或者absolute,表示当前描述的位置是相对定位还是绝对定位.
　　top 、bottom、 left、 right 四个键是数值类型.
　　当position的值为absolute时,描述就指的是当前组件的位置距离父组件最上(下、左、右)有多少pt.
　　当position的键为relative时,不可以使用bottom和right,top和left键默认值为0.top和left表示当前组件距离上一个同级组件的最上(左)有多少pt
　　宽高包括: width、height、maxHeight、maxWidth、minHeight、minWidth 都是数值类型,因为使用flexbox布局,组件的款和高是可以动态改变的,所以可以设置宽和高的最大和最小值
　　容器属性,决定子组件排列规则的键
　　flexDirection:
　　flexDirection键决定了组件内部的子组件是如何排列的, 取值可以为: row,column,类似Android中LinearLayout的orientation属性.
　　row：横向排列，主轴为水平方向;
　　column：竖直排列，主轴为垂直方向。

　　lexDirection
　　flexWrap:
　　flexWrap字符串类型,可选wrap和nowrap(默认值)
　　水平或垂直布局时,如果子View放不下，则自动换行, 默认为'nowrap'(不换行)

　　flexWrap
　　justifyContent：
　　设置子布局在主轴方向位置

　　justifyContent
　　alignItems：
　　定义了View组件中所有子组件的对齐规则. 有4种可能的字符串类型的值:
　　flex-start 顶部对齐
　　flex-end 底部对齐
　　center 中部对齐
　　stretch 拉长对齐

　　alignItems
　　元素属性,决定组件显示规则的键
　　flex：
　　权重，类似Android中weight。

　　lex
　　flex键的类型是数值,取值为0或者1,默认值是0,当它的值为1时,子组件将自动缩放以适应父组件剩下的空白空间.
　　开发者使用flex键时一定要小心,它的自动缩放意味着不仅可以改变自己的宽、高与位置,还可以通过挤压改变与它同级的其他组件的位置。
　　设置了flex:1的组件不是只能扩展,如果同级别固定宽高的组件在执行宽高增加了,那么设置flex:1的组件就会缩小来适应同级组件的宽和高变化.
　　alignSelf：
　　alignSelf键有5种可能的字符串类型值:auto、flex-start、flex-end、center、stretch.其用途是让组件忽略它的父组件样式中的alignItems的取值,而对该组件使用alignSelf键对应的规则。当它取值为auto时，表示使用父View组件的alignItems值。

　　alignSelf
　　边框、空隙与填充
　　边框borderWith, 填充 padding, 组件空隙margin, 接触过Android的同学看一眼下面的图应该就了解了。

　　盒子模型示意图
　　组件多样式声明与动态样式声明
　　组件可以有多种样式，可以把相同的样式抽取出去，方便复用。
　　写法如下：
style={[styles.container,styles.aStyle,styles.bStyle]}
　　在多种样式中,如果对某一个键有重复定义,那么后面的样式定义的键将覆盖前面的.
　　在UI设计中,有些组件的样式在应用运行中是需要改变的,这时我们需要直接在描述组件的JSX代码中写入需要变化的样式.
　　示例代码:
...
<Text
onPress={this.onTextPress}
style={[styles.aStyle,{color:this.state.appColor1}]}>
...
...
onTextPress(){
this.setState({
appColor1:'red'
})
}