javascript - FlatList 使用静态组件滚动

Question

我在一个屏幕中有一个静态组件和许多 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，让它随着渲染的组件滚动，我应该如何更改我的代码？

Answer 1

Flatlist 有一个属性 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>
    );
  }
}