reactjs - React Native中的两列布局

我想在本机应用程序的两列中显示多个元素。这是我到目前为止的内容：

class App extends Component {
  render() {
    const { viewStyle, childStyle } = style;

    return (
      <View style={viewStyle}>
        <View style={childStyle} />
        <View style={childStyle} />
        <View style={childStyle} />
        <View style={childStyle} />
        <View style={childStyle} />
        <View style={childStyle} />
        <View style={childStyle} />
        <View style={childStyle} />
        <View style={childStyle} />
      </View>
    );
  }
}

const space = 5;
const style = {
  viewStyle: {
    flex: 1,
    flexWrap: 'wrap',
    flexDirection: 'row',
    padding: space,
    marginTop: 20,
    backgroundColor: 'green'
  },
  childStyle: {
    width: '50%',
    height: 100,
    backgroundColor: 'red',
    borderWidth: 1,
    borderColor: 'black',
    marginBottom: space
  }
}

这是屏幕截图：https://imgur.com/a/wKgDR


我的问题是：如何在中间（左右元素之间）留一些空间？当用户旋转设备时，这是否也可能起作用？

最佳答案

您可能有一个带有flexDirection：'row'的容器，这样您的列就位于其中。然后在列之间插入一个空的View：

    const {width, height} = require('Dimensions').get('window');

<View style={{flex: 1, flexDirection: 'row', width: width}}>
    <View style={[viewStyle, {flex: 5, flexDirection: 'column'}]>
        <View style={childStyle} />
        <View style={childStyle} />
        ...
    </View>

    <View style={{flex: 1}}>
    </View>

    <View style={[viewStyle, {flex: 5, flexDirection: 'column'}]>
        <View style={childStyle} />
        <View style={childStyle} />
        ...
    </View>
</View>

这样很难保持固定的像素尺寸，但是会随着屏幕旋转而变化。或者，您可以仅在列视图中使用填充以在它们之间留出空间。如果您想走那么远，也可以禁用屏幕方向更改。希望这可以帮助！