Listview 在列表视图中使用网格视图

我需要使用列表视图和网格视图中的相关图像，但没有任何帮助我的代码在下面，请检查并让我知道如果有任何帮助

这是我的阵列：

render() {
    var standardDataSource = new ListView.DataSource({
      rowHasChanged: (r1,r2) => r1 !== r2});
    var catArray = [
      {
        id: 1,
        title: "cat1",
        images: [
          {
            image:"https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
          }
        ]
      }
]

这是我的视图，我需要在网格视图中使用ShowList视图

<View style={styles.container}>
          <ListView style={styles.catsList}
            dataSource = {cloneCatArray}
            renderRow = {
              (rowData) =>
              <View>
                <Text style={styles.catsTitle}>{rowData.title}</Text>
                <Image style={{ height: 150, width:equalWidth }}
                source={{ uri: rowData.images[0].image }}
                resizeMode='cover'/>
              </View>
            }
          >
            /*<FlatList
              data= {cloneCatArray}
              numColumns = {4}
              renderItem={this.renderRowitem}
            />*/
          </ListView>
        </View>

---

根据您在评论中的解释，我建议您使用scrollview和Flatlist的合并，如果您想使用grid view，可以为Flatlist定义numColumns，如果您需要水平显示图像，可以在Flatlist中定义horizontal={true}并删除numColumns：

import React，{Component}来自'React'；
从“react native”导入{View、Text、FlatList、ScrollView、Image}；
导出默认类测试扩展组件{
建造师（道具）{
超级（道具）；
此.state={
类别：[
{
id:1，
标题：“cat1”，
图像：[
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
}
]
},
{
id:2，
标题：“第二类”，
图像：[
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
}
]
},
{
id:3，
标题：“cat3”，
图像：[
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
},
{
图像：“https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
}
]
}
]
}
}
_renderItem=（{item}）=>(
);
_keyExtractor=（项，索引）=>索引；
render（）{
返回(
{this.state.categories.map（（cat，index）=>{
返回(
{cat.title}
)
})}
);
}
}

为什么不使用Flatlist？我是react native的新手，我在Listview中得到了很好的示例，所以我使用了这个。。。请大家分享一下如何在这个屏幕上使用平面列表。谢谢！我尝试了类似“类别列表的父列表视图”和“每个类别图像的子平面列表”的方法。您只想在网格视图中显示头发样式吗？我只是更新我的问题。请检查下面我需要使用的列表是类别，每个类别都有图像，因此我使用“类别列表视图”和“平面列表”来显示它们的图像。

1)Category1 (Hair)
a)image b) image c) image

2) Category 2 (Face)
a) image b) image c) image

3) Category 3 (Nails)
a) Image b) image c) image