React Native实现九宫格布局的填坑之旅（只显示一行）

想要做一个九宫格布局的效果，如果用Android来做的话可以使用Gridview或者RecycleView，用IOS来做的话可以使用TableView。不过React Native中默认没有提供这类可以直接形成九宫格效果的控件，只能用ListView来模拟，我们想要实现的效果如下：

要实现的九宫格布局的效果图.png

实现该效果的主要思路是：让ListView的主轴方向为横向（flexDirection:'row'），然后让其允许换行（flexWrap:'wrap'）。

在ListView中使用contentContainerStyle为其设置样式，所以我们返回的视图布局为：

render() {
    return (
        <ListView
            dataSource={this.state.dataSource}
            renderRow={this.renderRow}
            contentContainerStyle={styles.listViewStyle}
        />
    );
}

样式为：

listViewStyle: {
    // 改变主轴的方向
    flexDirection:'row',
    // 多行显示
    flexWrap:'wrap'
}

这样写应该就好了，看网上别人也的确是这么写的，但是出来的效果就让你失望了：

错误效果.png

错误：只显示了一行！！！！

当时的内心是奔溃的....

之后找到原因：在React Native 0.28之后，官方已经修改了flexWrap:'wrap'的工作方式了，之前的flexWrap:'wrap'和默认的alignItems:'stretch'是一起工作的，如果是0.28之后的版本，需要额外加上alignItems:'flex-start'。

所以最后的样式应该是这样的：

listViewStyle: {
    flexDirection:'row',
    flexWrap:'wrap',
    // 这行必须要加
    alignItems:'flex-start'
},

至此，用ListView实现九宫格布局只显示一行的问题解决完毕。

---

个人公众号（icemanFE）：分享更多的前端技术和生活感悟

个人公众号.png