在FlatList中具有静态和动态元素的反应
在FlatList中具有静态和动态元素的反应
提问于 2018-07-07 21:28:16
我正在尝试创建一个FlatList，有点像Twitter的Post列表，在设备的图片库中显示从相机到照片的选项。
我不知道如何将最初的2-3个元素作为静态元素，然后通过CameraRoll或其他方式添加动态元素。
我想到的第一个解决方案是拥有一个数组，它的前2-3个元素作为文本包含“摄像机”、“库”等，然后将该数组与动态数组连接起来，并通过renderItem()函数处理所有内容，以显示“静态元素”情况下的不同视图。但我希望有一个更好的方式来做这件事。请帮我解决这个问题。
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-07-07 22:58:34
我认为最好和最简单的选择是按照您所描述的方式:将“静态”数组与“动态”数组连接起来，并分别对待静态数组。
示例
class Options extends React.Component {
renderItem({ item, index }) {
if (index === 0) {
return <Camera />;
} else if (index === 1) {
return <Live />;
} else {
return <GeneralItem {...item} />;
}
}
render() {
const statics = [{ text: 'Camera' }, { text: 'Live' }];
return (
<FlatList
data={statics.concat(this.props.data)}
renderItem={this.renderItem}
/>
);
}
}Stack Overflow用户
发布于 2021-12-28 13:58:00
它可以在ListHeaderComponent内部使用FlatList内的道具来完成。我们可以把任何的JSX和实现静态的第一项。
<FlatList
data={data}
renderItem={({item, index})=><Item musicItem={item} index={index} currentIndex={currlistIndex} db_index={item.id_db}/>}
extraData={currlistIndex}
ListHeaderComponent={<AddSongs/>}
/> 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51227070
复制相关文章
相似问题
腾讯云开发者
