在视图中居中网格答案

【问题标题】：Center a grid inside a view在视图中居中网格
【发布时间】：2018-04-04 22:17:19
【问题描述】：

我正在使用 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>
    );
  }
}

这就是结果

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

编辑：

如果网格上只有一条线，则视图居中

如果我增加项目的大小并且网格包含多条线，则中心不再起作用

编辑：

这里是snack 的问题。

【问题讨论】：

你可以尝试将flex: 1添加到View吗
我做了但还是不行
你能用完整的例子创建一个Snack吗？
将 flex:1 添加到 Text ，如果不起作用，则使用 flex:1 将父视图添加到文本中
我用自定义组件替换了

标签： reactjs react-native flexbox

【解决方案1】：

我认为问题是由ListView 宽度与容器View 宽度相同引起的。关于如何实现所需行为，我有 2 个想法。

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

第一个想法是设置ListView 样式justifyContent: 'space-between' 或justifyContent: 'space-around'。此选项允许在一行中有不同大小的项目，每一行将包含它可以容纳的最多项目。但是这个选项使得第二行项目在行未满时，项目之间的边距不同。

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

我正在添加 2 种不同方法的屏幕，here 是示例应用的零食

【讨论】：