FlatList 使用静态组件滚动答案

【问题标题】：FlatList scroll with the static componentFlatList 使用静态组件滚动
【发布时间】：2019-05-19 17:15:38
【问题描述】：

我在一个屏幕中有一个静态组件和许多 for 循环渲染的组件。

这里的所有代码。

import React from "react";
import { View, Text, FlatList } from "react-native";
...

class FlatListScrollWithStatic extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>
        <FriendsTop />  // the static component
        <FlatList
          style={{ flex: 1 }}
          data={this.props.friendsCard}
          renderItem={({ item }) => <FriendsCard {...item} />}  // the for loop rendered components
          keyExtractor={(item, index) => index.toString()}
        />
      </View>
    );
  }
}

现在我想将 FriendsTop 迁移到 Flatlist 中，让它随着渲染的组件滚动，我应该如何更改我的代码？

【问题讨论】：

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

【解决方案1】：

这可能对你有用：

import React, { Fragment } from "react";

...

<FlatList
  style={{ flex: 1 }}
  data={this.props.friendsCard}
  renderItem={({ item }, index) => (
    <Fragment>
      { !index && <FriendsTop /> } // Render when !index is truthy (i.e. index === 0)
      <FriendsCard {...item} />
    </Fragment>
  )}
  keyExtractor={(item, index) => index.toString()}
/>

【讨论】：

这让FriendsTop 可以滚动，同时也渲染FriendsTop 和FriendsCard。
是的，只有在第一个元素（索引 === 0）上，它才会在第一个项目之前将FriendsTop 组件呈现到列表中。它会随着整个列表滚动。

【解决方案2】：

Flatlist 有一个 prop ListHeaderComponent，它接受一个 JSX 元素。所以：

import React from "react";
import { View, Text, FlatList } from "react-native";
...

class FlatListScrollWithStatic extends React.Component {
  render() {
    return (
      <View style={{ flex: 1 }}>

        <FlatList
          style={{ flex: 1 }}
          data={this.props.friendsCard}
          renderItem={({ item }) => <FriendsCard {...item} />}  // the for loop rendered components
          keyExtractor={(item, index) => index.toString()}
          ListHeaderComponent={<FriendsTop />}
        />
      </View>
    );
  }
}

【讨论】：

哦，是的，我忘记了 react-native flatlist 与我使用的普通 react 版本相比有更多可用的道具。好电话。
您的解决方案也有效，但我认为这更清洁。
哦，当然。我大部分时间都在做 React 开发，所以不得不基于 RN 的 FlatList 推出我自己的 flatlist 并使用最简单的道具来让我的团队的其他成员更愿意采用它。

【解决方案3】：

我有两种方法可以做到这一点，第一种是使用 flatlist 的 header 组件

但我想如果你想要静态数据和从 fetch 中获得的数据，你应该将它们结合起来

 <FlatList
   inverted
      data={this.state.data.concat({
        "id":1,
        "user_id": 1,
        "title": "all",
        "similar_title": null,
        "description": null,
        "font_icon": null,
        "default_distance": 8,
        "visible": "yes",
        "priority": "no",
        "image": null,
        "created_at": null,
        "updated_at": "2018-06-14 22:13:58"
    })}

      numColumns={4}


      renderItem={({item}) =>

在该代码中，我正在添加带有 concat 的静态所有按钮

【讨论】：