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

Question

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

这是我的数组：

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

这是我的视图，需要在Grid视图中使用show List视图。

<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

Answer 1

根据评论中的解释，我建议您使用scrollview和Flatlist的组合，如果要使用网格视图，可以为Flatlist定义numColumns，如果需要水平显示图像，则可以定义horizo​​ntal = {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>
        );
    }
}