反应原生 flexbox 拉伸问题答案

【问题标题】：react native flexbox stretch issue反应原生 flexbox 拉伸问题
【发布时间】：2018-04-29 16:43:40
【问题描述】：

在 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>
    );
}

}

但这给了我：

请帮忙

【问题讨论】：

alignItems: 'stretch'set to row 应该可以解决这个问题...在标准 Flexbox 中这是默认设置
对不起，我帮不上忙

标签： react-native flexbox react-native-flexbox

【解决方案1】：

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

【讨论】：