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

【问题标题】：react native - Having static and dynamic elements in FlatListreact native - 在 FlatList 中具有静态和动态元素
【发布时间】：2018-12-16 01:07:45
【问题描述】：

我正在尝试创建一个类似于 Twitter 的 Post Tweet 列表的 FlatList，在设备的图库中显示从相机到照片的选项。

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

我想到的第一个解决方案是有一个数组，它的前 2-3 个元素作为包含“相机”、“画廊”等的文本，然后将该数组与动态数组连接起来，并通过 renderItem( ) 函数为“静态元素”案例显示不同的视图。但我希望有一个更好的方法来做到这一点。请帮我解决这个问题。

【问题讨论】：

为什么不是两个组件？
如果你的意思是有两个列表，第一个是静态元素，第二个是动态元素（这就是你在说的吗？），那么滚动将无法正常工作。 “静态+动态”列表作为一个整体应该是可滚动的。
我明白了。对我来说缺乏 react-native 经验。那么如果这两个组件位于容器之类的东西中，那么滚动就不起作用了？
我不认为您将“静态”数组与“动态”数组连接起来然后在renderItem() 中添加一些额外逻辑的想法是不好的。这可能是最简单的方法。
@devserkan 滚动有效，但它们会有单独的滚动，即当您要滚动动态元素组件时，静态元素将保留在那里，而动态元素列表将在其内部滚动。我不想将它们作为两个独立的实体展示给用户。

标签： javascript reactjs react-native react-native-flatlist

【解决方案1】：

可以使用 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/>}             
    />

【讨论】：

【解决方案2】：

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

示例

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

【讨论】：

我真的希望有一种适当的方法来做到这一点，因为这对我来说是一种解决方法。尽管如此，还是非常感谢！ :)