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

Question

我想创建一个 2 行 3 列可见的水平滚动平面列表。数据将是来自 api 的动态数据。我设法创建了如下所示的垂直滚动平面列表： 。 有numOfColumns 指定列数，但没有任何行数。当我尝试设置horizontal={true} 时，布局变得很奇怪： 它还会抛出numOfColumns 不能与水平滚动平面列表一起应用的错误。请参阅附加的屏幕截图以获取所需的输出：。

我的垂直滚动平面列表代码：

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

         }/>

我应该进行哪些更改以获得所需的输出。

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

您可以通过在 Vertical Flatlist Items 中添加 Horizo​​ntal Flatlist 来实现这一点，如下所示：

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

在尝试从这种类型的 json 数组数据中呈现此问题的所需输出时，发生了同样的问题

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

我尝试了很多方法来呈现两行格式，但不能。所以，我改变了这些格式的json

    [
      [
         {"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"} 
         ...
      ]
]

我们有两种方法可以得到这种类型的 json 格式

1. 来自后端 api
2. 通过在 componentDidmount 或函数中使用 Javascript 代码将 jsonarray 拆分为块数组为一个数组。

然后您可以使用此代码执行此问题的所需输出

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