Использовать вид сетки в виде списка 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",
          }
        ]
      }
]

Вот мое представление, в котором мне нужно использовать представление списка в виде сетки.

<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, если вы хотите иметь вид сетки, вы можете определить numColumns для Flatlist, если вам нужно показать изображения по горизонтали, вы можете определить горизонтальный = {true}в плоский список и удалите 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>
        );
    }
}