ReactNative FlatList嵌套在FlatList中

Question

我想做一些像https://i.stack.imgur.com/SlbKX.png这样的事情。如果您需要更多的信息，请告诉我！希望有人能帮我！

`const DATA=[[1,name1,...],[2,name2,...]...];// Data like [[...],[...],...]
<FlatList
    data={DATA}  
    keyExtractor={(outterItem)=>outterItem.key}
    renderItem={({outterItem})=>(                                                                          
    <View>
        <FlatList
              horizontal={true}
              data={outterItem}
              keyExtractor={(innerItem)=>innerItem.key}
              renderItem={({InnerItem})=>(  
                  <View style={styles.box}>
                      <Text style={styles.Text}>{InnerItem}</Text>
                   </View>
              )}   
         />
    </View>

  />



`

Answer 1

您正在破坏item函数的renderItem函数的FlatList参数。不能将其重命名为innerItem或outerItem。两者的名称都必须是item。这将不会发生冲突，因为item参数将位于本地范围内。

下面是一个带有虚拟数据数组的工作版本。

export default function App() {
  const DATA=[[1,2,3],[2, 3, 4 ,5]];
  return (
  <FlatList
    data={DATA}  
    keyExtractor={(item, index)=>index.toString()}
    renderItem={({item})=>(                                                                          
    <View>
        <FlatList
              horizontal={true}
              data={item}
              keyExtractor={(item, index)=> index.toString()}
              renderItem={({item})=> (  
                  <View style={styles.box}>
                      <Text style={styles.Text}>{item}</Text>
                   </View>
              )}   
         />
    </View>)} 
  />)
}