React Native：renderItem 組件到 Custom FlatList 作為道具？ （如 Vue 插槽）

Question

我想要一個可重用的 FlatList 組件，基本上是一個包裝器，我可以將自定義組件作為要渲染的項目傳遞，並且我想將此組件作為道具傳遞，這很容易在 vue..js 中使用 scoped/slots 完成。

有沒有辦法在本機反應中做到這一點？

<View style={{ flex:1 }}>
        <FlatList  style={{ width:'100%'}}  data={props.data} keyExtractor={item => item.id.toString()}
            renderItem={({ item, index }) => 
            <PropComponent item={item}></PropComponent>}
        />
    </View>

在上面的示例中， PropComponent 將像這樣傳遞給 CustomFlatList：

<CustomFlatList>
     <PropComponent></PropComponent>
</CustomFlatList>
```

Answer 1

使用這種方式

// CustomFlatList.js

const { ...rest } = props;

<View style={{ flex:1 }}>
        <FlatList  
           style={{ width:'100%'}}  
           data={props.data} 
           keyExtractor={item => item.id.toString()}
           {...rest}
        />
</View>

用法如

itemView = ({ item, index }) => {
 return <PropComponent item={item} />
}

<CustomFlatList renderItem={itemView} />