如何在 React Native 中创建 2 行 3 列可见的水平滚动 Flatlist？

Question

I want to create a Horizontal Scrolling Flatlist with 2 rows and 3 columns visible. Data will be dynamic from api. I have managed to create vertical scrolling Flatlist which looks like this: . There is numOfColumns to specify count of columns but there is nothing for rows. When I tried to set horizontal={true} , layout became weird: Also it throws error that numOfColumns can not be applied with Horizontal Scrolling Flatlist. Please refer attached screenshot for Desired output: .

My Code for Vertical Scrolling Flatlist:

<FlatList
        ref={(ref) => { this.flatListRef = ref; }}
        style={{ width: '90%', marginTop: 10, marginLeft: 10, backgroundColor: 'transparent', borderRadius: 5, alignSelf: 'center' }}
        bounces={false}
        // horizontal={true}
        numColumns={3}
        data={this.state.categoryData}
        renderItem={({ item: data, index }) => {
        return (
          <ServiceView viewWidth={'100%'} viewHeight={'100%'} viewPaddingLeft={1} viewPaddingRight={10} viewPaddingTop={1} viewPaddingBottom={12} serviceName={(globalUserType == 'provider') ? data.services.name : data.name} serviceIconUrl={(globalUserType == 'provider') ? data.services.image : data.image} jobCount={(globalUserType == 'provider') ? '' : ''} showDot={(globalUserType == 'provider') ? false : false} 
           serviceAction={
           () => this.navigateTo('category', data)

         }/>

What changes should i make to get desired output.

Answer 1

class App extends Component {
  renderItemForFirstList = ({item, index}) => {
    <FlatList
      data={item}
      renderItem={this.renderItemForSecondList}
    />
  }
  render() {
    return (
      <View>
        <FlatList
          data={this.state.categoryData}
          renderItem={this.renderItemForFirstList}
        />
      </View>
    );
  }
}

Answer 2

You can achieve this by adding Horizontal Flatlist in Vertical Flatlist Items like this:

Vertical FlatList
<FlatList  
   data={[  
   {imageKey: 'image1',imageKey: 'image2',imageKey: 'image3'},{imageKey: 'image4',imageKey: 'image5',imageKey: 'image6'},{imageKey: 'image7',imageKey: 'image8',imageKey: 'image9'} ]}  
    renderItem={({item}) =>  
       <FlatList  
         horizontal={true}
         showsHorizontalScrollIndicator={false}
         data={item}  
         renderItem={({item}) =>  
          <Text>{item.key}</Text>}  
       /> 
   />  

Answer 3

Same issue happened, when trying to render desired output of this question from this type of json array data

[{"id": 1, "name": "John", "image": "/api/12.jpg"}, {"id": 2, "name": "James", "image": "/api/14.jpg"}, {"id": 3, "name": "David", "image": "/api/172.jpg"} ...]

i tried many way to render in two rows format, but could not. So, i changed the json in these format

    [
      [
         {"id": 1, "name": "John", "image": "/api/12.jpg"}, 
         {"id": 2, "name": "James", "image": "/api/14.jpg"}, 
         {"id": 3, "name": "David", "image": "/api/172.jpg"} 
           ...
      ],
      [
         {"id": 9, "name": "Kim", "image": "/api/12hj.jpg"}, 
         {"id": 10, "name": "Jim", "image": "/api/14ff.jpg"}, 
         {"id": 11, "name": "Rose", "image": "/api/1723.jpg"} 
         ...
      ]
]

There will two way we can get this type of json format

1. From backend api
2. By spliting jsonarray into chunk arrays into one array using Javascript code in componentDidmount or in function.

then you can use this code to perform the desired output of this question

<ScrollView
      
        horizontal={true}
        showsHorizontalScrollIndicator={false}
      
      >
        //two row formated json array
        {this.state.checkData.map((dd, index) => 
          
            <FlatList
           
            contentContainerStyle={{alignSelf: 'flex-start'}}
            numColumns={3} //<---------- here we can change the number of rows
            data={dd}
            renderItem={({ item: rowData }) => {
           
              return (
                <TouchableOpacity style={{ padding: 6}} onPress={() => this.props.navigation.navigate('RDetails', { id: rowData.id })}>

                  <View style={{flex: 1, height:110, width: 96}}>

                  
                  <View style={{ flex: 1 }}>
                    <Image resizeMode='stretch' style={{ borderRadius: 5, width: 80, height: 70, margin: 2 }} source={{ uri: rowData.image }} />

                  </View>
                  
              </View>

                </TouchableOpacity>
              );

            }
            }
            keyExtractor={(item, index) => index.toString()}
          />
        )}
      </ScrollView>

Answer 4

There another way using _.chunk from Lodash.

Example:

{_.chunk(data, 2).map((item, index) => (
  <View key={index} style={{flexDirection: "column"}>
  {item.map((subItem, subIndex) => (

  <Text key={subIndex}>{subItem}</Text>

  ))}
  </View>
))}