ReactNative学习笔记1 Flexbox布局
一、比例属性flex和布局方向属性flexDirection
例如三个视图的flex属性值分别为2、4、8,则它们的高度比例为2:4:8。,宽度不指定,默认为全屏的宽度。
class ZLFReactNativeDemo extends Component { render() { return ( <View style={styles.container}> <View style={styles.style1}></View> <View style={styles.style2}></View> <View style={styles.style3}></View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,
flexDirection:column
, backgroundColor: '#00FFFF', }, style1: { flex: 2, backgroundColor: 'red', }, style2: { flex: 4, backgroundColor: 'blue', }, style3: { flex: 8, backgroundColor: 'green', }, });
如果要改为横向布局,则只需改父视图的属性flexDirection为row
二、对齐方式属性alignSelf
alignSelf主要有flex-start(对于纵向布局来说是居上,对于横向布局是居左)、 flex-end
(对于纵向布局来说是居下,对于横向布局是居右)
、 center(居中)、 auto(自由)、 stretch(铺满)几种对齐方式。
三、
justifyContent
有如下值、用于约束子视图
四、alignItems
有如下值、用于约束子视图