React Native中的FlexBox

关于JSX

React的核心机制之一就是虚拟DOM：可以在内存中创建的虚拟DOM元素

React利用虚拟DOM来减少对实际DOM的操作从而提升性能

在JavaScript中嵌入XML结构的语法,于是就有了JSX，利用我们熟悉的HTML语法来创建虚拟DOM，在实际开发中，JSX在产品打包阶段都已经编译成纯JavaScript，JSX的语法不会带来任何性能影响

关于FlexBox

通过弹性的方式来对齐和分布容器中内容的空间，使其能适应不同屏幕，为盒装模型提供最大的灵活性

Flex布局主要思想是：让容器有能力让其子项目能够改变其宽度、高度（甚至是顺序），以最佳方式填充可用空间

React native中的FlexBox是这个规范的一个子集

Flexbox的常用属性

组件中存在两根轴：水平的主轴和垂直轴

在组件的style中指定

flexDirection

可以决定布局的主轴

组件内部的所有控件的布局是水平布局还是垂直布局只需要控制父视图的

flexDirection

即可

flexDirection

默认值是主轴是纵向的，即

flexDirection

为column





通过修改style中的

flexDirection

为row

justifyContent

决定其子控件沿着主轴的排列方式

//center,
//flex-start,
//flex-end,
//space-around   伸缩项目会平均地分布，俩端保留一半的空间
//space-between  俩端对齐，控件之间间隔相等

alignItems

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

//flex-start
//flex-end
//center
//stretch(默认)

flexWrap

默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

nowrap:(默认值)：不换行
wrap：换行，第一行在上方

Flexbox的元素属性

flex

一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间

如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间



如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）



注：组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的

alignSelf

align-self属性允许单个子控件有与其他控件不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

// flex-start
// flex-end
// center
// auto(默认)

目前所有控件设置的是居中，若第一个view想要改变位置，只需要在style中设置alignSelf为flex-start，就会改变其位置

其他布局

尺寸

width

height

边距

left number 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。

right number 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移

top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。

bottom number 属性规定元素的底部边缘。该属性定义了一个定位元素的下外边距边界与其包含块下边界之间的偏移。

视图边框

borderBottomWidth 底部边框宽度

borderLeftWidth 左边框宽度

borderRightWidth 右边框宽度

borderTopWidth 顶部边框宽度

borderWidth 边框宽度

borderColor 个方向边框的颜色

borderColor 边框颜色

export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};

const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red',
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',

borderBottomWidth:30,
borderLeftWidth:30,
borderRightWidth:30,
borderTopWidth:30,
borderWidth:10,
borderColor:'blue',
},
});

运行效果:

外边距

围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的空间

margin 外边距

marginBottom 下外边距

marginHorizontal 左右外边距

marginLeft 左外边距

marginRight 右外边距

marginTop 上外边距

marginVertical 上下外边距

export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};

const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red'，
},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
margin:30,
},
});

运行效果:

内边距

元素的内边距在边框和内容区之间

padding 内边距

paddingBottom 下内边距

paddingHorizontal 左右内边距

paddingLeft 做内边距

paddingRight 右内边距

paddingTop 上内边距

paddingVertical 上下内边距

export default class App4 extends Component<{}> {
render() {
return (
<View style={styles.container}>
<View style={styles.innerViewStyle}>
</View>
</View>
);
}
};

const styles = StyleSheet.create({
container:{
width:200,
height:200,
backgroundColor:'red',
//内边距
padding:30,

},
innerViewStyle:{
width:100,
height:100,
backgroundColor:'yellow',
},
});

运行效果：

定位(position)

设置元素的定位方式，为将要定位的元素定义定位规则。通过

position

，enum(‘absolute’, ‘relative’)属性设置

absolute：生成绝对定位的元素，元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。

relative：生成相对定位的元素，相对于其正常位置进行定位。因此，”left:20” 会向元素的 LEFT 位置添加 20 像素。

注意：结论：通常情况下设置position和absolute，定位的效果是一样的，但是如果父组件设置了内边距，position会做出相应的定位改变，而absolute则不会。