反应原生flexbox拉伸问题

Question

在本地反应我希望达到这种效果

当然所有按钮都应具有相同的宽度和高度。 为此，我使用弹性盒。我怎么能用flexbox做到这一点？ 我试试：

const styles = StyleSheet.create({
mainView: {
   flex: 1,
   flexDirection: 'column',
   alignItems: 'stretch'
},
rows: {
    flex: 1,
    flexDirection: 'row',
},
buttons: {
    flex: 1,
}

}）;

export default class Home extends Component {
render() {
    return (
      <View style={styles.mainView}>
        <View style={styles.rows}>
        <View style={styles.buttons}><Button title="aaa"/></View>
        <View style={styles.buttons}><Button title="aaa"/></View>
        </View>
        <View style={styles.rows}>
          <View style={styles.buttons}><Button title="aaa"/></View>
          <View style={styles.buttons}><Button title="aaa"/></View>
        </View>
        <View style={styles.rows}>
          <View style={styles.buttons}><Button title="aaa"/></View>
          <View style={styles.buttons}><Button title="aaa"/></View>
        </View>
      </View>
    );
}

}

但是这给了我：

请帮忙

Answer 1

如果您为所有样式设置背景颜色，您将看到您的布局正常工作，但您无法在React Native中更改Button的高度。使用TouchableOpacity或TouchableHighlight代替Button，“按钮”将填充整个视图，而不是粘贴到顶部。