反应本机 flexbox 拉伸问题

Question

在react native中我想实现这个效果

当然所有的按钮都应该有相同的宽度和高度。为此，我使用弹性盒子。我怎样才能用 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 or a TouchableHighlight 而不是 Button，"button" 将填满整个视图而不是粘在顶部。

反应本机 flexbox 拉伸问题

react native flexbox stretch issue

flexbox

react-native

react-native-flexbox