我有这个 View ,其中一列中有两个 View :
<View style={styles.container}>
<View style={styles.content}>
<View style={{backgroundColor: 'orange'}}>
<Text>Test</Text>
</View>
<View style={{backgroundColor: 'yellow'}}>
<Text>Test2</Text>
</View>
</View>
</View>
这是我的样式:
container: {
flexDirection: 'row',
backgroundColor: 'white',
justifyContent:'center',
alignItems:'center',
height: 80,
margin: 8,
},
content: {
flex:1,
alignItems: 'stretch',
flexDirection: 'column',
},
这是一个ScreenShot上面代码的外观。
如何让橙色和黄色的 View 在垂直方向上均匀展开,而不用手动定义它们的高度?
里面的文字应该居中,但是左对齐。
最佳答案
向每个单元格添加 flex: 1
使它们展开并添加 justifyContent: 'center'
使文本垂直居中。像这样:
<View style={styles.container}>
<View style={styles.content}>
<View style={{ backgroundColor: 'orange', flex: 1, justifyContent: 'center' }}>
<Text>Test</Text>
</View>
<View style={{ backgroundColor: 'yellow', flex: 1, justifyContent: 'center' }}>
<Text>Test2</Text>
</View>
</View>
</View>
关于react-native - 如何垂直拉伸(stretch)列中的两个 View - React Native Flex?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50379038/