在列表视图中使用网格视图 React Native答案

【问题标题】：Use Grid View in List View React Native在列表视图中使用网格视图 React Native
【发布时间】：2019-03-20 16:04:52
【问题描述】：

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

这是我的数组：

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",
          }
        ]
      }
]

这是我需要在网格视图中使用显示列表视图的视图。

<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>

这是我需要预览的列表：

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

【问题讨论】：

为什么不使用 Flatlist ？
我是 React Native 的新手，我用 Listview 获得了很好的例子，所以我使用了这个......请您分享如何在这个屏幕上使用平面列表......谢谢！
我尝试了类似父列表视图的类别列表和每个类别图像的子平面列表。
您只想在网格视图中显示发型？
我刚刚更新了我的问题，请在下面查看我需要在这里使用的列表是类别，每个类别都有图像，所以我使用列表视图作为类别，使用平面列表作为他们的图像。

标签： listview react-native gridview react-native-flatlist

【解决方案1】：

根据您在评论中的解释，我建议您结合使用滚动视图和平面列表，如果您想要网格视图，您可以为 Flatlist 定义 numColumns，如果您需要水平显示图像，您可以定义 Horizontal={true}在 flatlist 中并删除 numColumns ：

import React, { Component } from 'react';
import { View, Text, FlatList, ScrollView ,Image} from 'react-native';

export default class Test extends Component {
    constructor(props) {
        super(props);

        this.state = {
            categories: [
                {
                    id: 1,
                    title: "cat1",
                    images: [
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },{
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        }
                    ]
                },
                {
                    id: 2,
                    title: "cat2",
                    images: [
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        }
                    ]
                },
                {
                    id: 3,
                    title: "cat3",
                    images: [
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        },
                        {
                            image: "https://cdn2.stylecraze.com/wp-content/uploads/2015/06/41-Cute-And-Chic-Cornrow-Braids-Hairstyles.jpg",
                        }
                    ]
                }
            ]
        }
    }
   
    _renderItem = ({item}) => (
        <Image style={{width:100,height:100}}  source={{uri : item.image}}/>
      );

    _keyExtractor = (item, index) => index;
      
    render() {
        return (
            <ScrollView style={{ flex: 1}}>
                {this.state.categories.map((cat, index) => {
                    return (
                        <View key={cat.id}>
                        <Text>{cat.title}</Text>
                        <FlatList
                            data={cat.images}
                            numColumns={3}
                            extraData={cat.images}
                            keyExtractor={this._keyExtractor}
                            renderItem={this._renderItem}
                        />
                        </View>
                    )
                })}
            </ScrollView>
        );
    }
}

【讨论】：