在屏幕宽度之外的一行中水平反应本机FlatGrid产生的内容

Question

尽管将水平设置为false，但是我在水平响应本机FlatGrid生成内容时遇到一些问题。我想创建一个两列垂直网格布局，类似于带有平面列表的React native flexbox - how to do percentages || columns || responsive || grid etc。

我想知道这是否是在每个框中创建一个TouchableOpacity对象的错误。

这是我的样式表的代码

const styles = StyleSheet.create({
  backgroundContainer: {
    flex: 1,
    width: null,
    height: null,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  gridView: {
    marginTop: 10,
    flex: 1,
  },
  itemContainer: {
    flexDirection: 'column',
    //justifyContent: 'flex-end',
    borderRadius: 10,
    padding: 10,
    height: 150,
    //alignItems: 'flex-end',
  },
});

这是渲染flatgrid对象的代码

  render() {
    return (
        <ImageBackground source = {bgImage} style={styles.backgroundContainer}>
            <FlatGrid
            refreshControl={
              <RefreshControl
                refreshing={this.state.refreshing}
                onRefresh={this._onRefresh}
              />
              }   
              itemDimension={150}
              itemWidth = {WIDTH/2}
              //staticDimension={150}
              items={this.data()}
              style={styles.gridView}
              fixed={true}
              horizontal={false}
              numColumns={2}
              renderItem={({ item, index }) => (
                <TouchableOpacity style={[styles.itemContainer, { backgroundColor: 'rgba(40, 40, 40, 1)' }]}>
                </TouchableOpacity>
              )}
            />
        </ImageBackground>
    );
  }

WIDTH变量是从Dimensions.get('window').width

获得的

编辑：

我只是尝试使用伪数据，并且完美呈现。可能是由于我在componentDidMount上执行GET请求而导致FlatGrid再次刷新。