javascript - FlatList scroll with the static component

Question

I have one static component and many for loop rendered components in a screen.

The all code below here.

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

Now I want to migrate the FriendsTop into Flatlist, let it scroll with the rendered components, how should I change my code?

标签： javascriptreact-nativereact-native-flatlist

Answer 1

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

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