react native - 在 FlatList 中有静态和动态元素

Question

我正在尝试创建一个有点像 Twitter 的 Post 推文列表的 FlatList，显示设备图库中从相机到照片的各种选项。

我不确定如何将前 2-3 个元素作为静态元素，然后通过 CameraRoll 或其他方式添加动态元素。

我想到的第一个解决方案是使用一个数组，其前 2-3 个元素作为包含 "Camera"、"Gallery" 等的文本，然后将该数组与动态数组连接起来，然后通过 renderItem() 函数处理所有内容，以显示 "static element" 案例的不同视图。但我希望有 更好的方法 来做到这一点。请帮我解决这个问题。

Answer 1

我认为最好和最简单的选择是按照您概述的方式进行操作：将 "static" 数组与 "dynamic" 数组连接起来，并分别处理静态数组。

例子

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

Answer 2

可以使用 FlatList 中的 ListHeaderComponent 属性来完成。我们可以放任何 JSX 并实现静态第一项。

   <FlatList
      data={data}
      renderItem={({item, index})=><Item musicItem={item} index={index} currentIndex={currlistIndex} db_index={item.id_db}/>}
      extraData={currlistIndex}
      ListHeaderComponent={<AddSongs/>}             
    />

react native - 在 FlatList 中有静态和动态元素

react native - Having static and dynamic elements in FlatList

javascript

reactjs

react-native

react-native-flatlist