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