React Native 学习笔记七（关于布局的使用）

在React Native中使用flexbox（弹性盒子）来设置子组件的布局。Flexbox可以在不同屏幕尺寸上提供一致的布局结构（从而实现屏幕的适配 就像android中的比重适配一样）。

一般来说，使用

flexDirection（排列方向）、

alignItems（子元素沿着次轴（与主轴垂直的轴，比如若主轴方向为row，则次轴方向为column）的排列方式），

justifyContent(子元素沿着主轴的排列方式。子元素是应该靠近主轴的起始端还是末尾段分布呢？亦或应该均匀分布？对应 的这些可选项有：flex-start、center、flex- end、space-around以及space-between)

三个样式属性就已经能满足大多数布局需求。

对于弹性盒子的使用和web的css基本一样 也有些许的差异

差异：默认值不同：flexDirection的默认值是column而不是row，alignItems的默认值是stretch而不是flex-start，以及flex只能指定一个数字值。

1.flexDirection（排列方向）

在原有代码的基础上 设置显示方向为水平方向

class helloReact1 extends Component {
//渲染
render() {
return (
//设置显示风格 自定义View 显示结果为Hellohello HelloWorld  每个return下面 只能有一个直属的View
<View style={{backgroundColor:'yellow',flexDirection:'row'}}>
<Blank  text='I want you'/>
<Blank  text='I want you1111'/>
<Blank  text='I want you2222'/>
</View>
);
}
}

2. alignItems（子元素沿着次轴)

class helloReact1 extends Component {
//渲染
render() {
return (
//设置显示风格 自定义View 显示结果为Hellohello HelloWorld  每个return下面 只能有一个直属的View
<View style={{height:500,backgroundColor:'yellow',flexDirection:'row',alignItems:'center'}}>
<Blank  text='I want you'/>
<Blank  text='I want you1111'/>
<Blank  text='I want you2222'/>
</View>
);
}
}

换句话说 就是自定义的组建 在与设置方向相反的方向上的位置分布 比如这里设置的是水平方向排列 那么 设置alignItems就是设置在竖直方向上的位置 位于布局的中间 上下留白一样

stretch:拉长 占满空间 没有留白

3.justifyContent(子元素沿着主轴的排列方式）

class helloReact1 extends Component {
//渲染
render() {
return (
//设置显示风格 自定义View 显示结果为Hellohello HelloWorld  每个return下面 只能有一个直属的View
<View style={{backgroundColor:'yellow',flexDirection:'row',justifyContent:'center'}}>
<Blank  text='I want you'/>
<Blank  text='I want you1111'/>
<Blank  text='I want you2222'/>
</View>
);
}
}

在水平方向上的排布

flex-start:相当于left

flex-end：相当于 right

space-around:均匀分布（每块留白都是一样的）

space-between：均匀分布（左右两边不留白）

其他布局：

alignSelf 根据自己设置占据空间的大小

center：根据子组件的大小 控制父组件的大小（没有设置具体大小） 显示位置为主轴方向居中（flex-start flex-end 一样）

auto 占满空间父组件的大小（没有设置具体大小）

borderBottomWidth borderBottomColor 设置边框的宽度和颜色

borderBottomWidth:20,borderBottomColor:'pink'

。。。。

还有很多可用的属性 参照 布局属性更多