Question

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

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

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

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>

难以像这样维持固定的像素尺寸，但它会在屏幕旋转时调整大小。或者，您可以在列View中使用填充以在它们之间留出空格。如果你想走得那么远，也可以禁用屏幕方向更改。希望这有帮助！

Answer 2

如果要确保空间固定为5px，一个解决方案是从Dimensions模块中获取设备的宽度。每行中的项目可以是这个宽度的一半-2.5px。更改childStyle.width以反映此数字。最后在行中的每个其他项之后呈现<View style={{width: 5}} />，您应该全部设置。（无论设备如何定向，此解决方案都应该正常工作）

Answer 3

添加你的viewStyle： justifyContent: 'space-between'

两列布局反应原生

3 个答案: