反应原生中的两列布局

Question

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

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

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

Answer 1

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

    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>

很难保持这样的固定像素尺寸，但它会根据屏幕旋转调整大小。或者，您可以在列视图中使用填充来在它们之间留出空间。如果您想做到这一点，您还可以禁用屏幕方向更改。希望这可以帮助！