reactjs - 将网格置于 View 内的中心

Question

我正在使用 ListView 创建一个网格。这是我的代码

export default class CategoryContainer2 extends Component {
  constructor() {
    super();
    const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['row 1', 'row 2','row 3','row 4','row 5']),
    };
  }

  render() {
    return (
      <View style={{         
        backgroundColor:'#ebeef0',
        alignItems:'center',
        justifyContent:'center'}}>
      <ListView contentContainerStyle={styles.list}
          dataSource={this.state.dataSource}
          renderRow={(rowData) => <Text style={styles.item}>{rowData}</Text>}
        />
        </View>
    );
  }
}

这就是结果

正如您在我的代码中看到的，我试图将网格在屏幕中居中，但这不起作用。您知道如何做到这一点吗？

编辑:

如果网格上只有一行，则 View 居中

如果我增加项目的大小并且网格包含多于一行，则中心不再工作

编辑:

这是 snack与问题。

Answer 1

我相信问题是由 ListView 宽度与容器 View 宽度相同引起的。关于如何实现期望的行为，我有两个想法。

对于这两个想法，我将 paddingLeft 和 paddingRight 添加到容器 View 中心 ListView。

第一个想法是设置 ListView 样式 justifyContent: 'space- Between' 或 justifyContent: 'space-around'。此选项允许在一行中具有不同大小的项目，并且每行将包含其可以容纳的最大数量的项目。但当该行未满时，此选项会使第二行项目之间的边距不同。

第二个想法是计算项目的宽度，然后在每行中设置固定数量的项目。此选项更受控制，但需要固定项目的宽度。

我正在添加 2 种不同方法的屏幕和 here是示例应用程序的小吃