在视图中居中网格

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

这就是结果

正如您在我的代码中看到的那样,我试图将网格置于屏幕中心,但这不起作用.你对如何做到了吗？

编辑:

如果网格上只有一行而不是视图居中

如果我增加项目的大小并且网格包含多行,则中心剂量不再起作用

编辑:

这是问题的小吃.

Answer 1

我认为问题是由ListView宽度与容器View宽度相同引起的.我有两个关于如何实现理想行为的想法.

对于这两个想法,我添加了paddingLeft和paddingRight容器View到中心ListView.

第一个想法是设置ListView风格justifyContent: 'space-between'或justifyContent: 'space-around'.此选项允许一行中具有不同大小的项目,并且每行将包含它可以容纳的最多项目.但是,当行未满时,此选项会使第二行项目之间的边距不同.

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

我正在添加一个2种不同方法的屏幕,这里是示例应用程序的小吃