react-native - 反应原生 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

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