[React-Native]flex-box实践（一）

• 如果你希望文字居中显示，那么可以为Text包裹一个View

container: {
        justifyContent: 'center',
        alignItems: 'center'
    },

然后，在被包裹的Text中书写文字

 <View style={styles.container}>
      <Text style={styles.textStyle}>
           login
       </Text>
</View>

• 一种较为常见的布局

flex-box_Demo

这种样式的实现：

  container: {
        flex: 1,
        backgroundColor: '#f4f4f4',
        flexDirection: 'column',
    },

    child: {
        height: 50,
        backgroundColor: 'white',
        // 这是一个重要的实现
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center'
    },

关键点在于，你需要在child中设置该Child的flex方向，并设置

 justifyContent: 'space-between',
 alignItems: 'center'

• 最下部view的排列

flex-box_demo