探索React Native中的创新组件：react-native-sticky-item

import React from 'react';
import { View, Text, FlatList } from 'react-native';
import StickyItem from 'react-native-sticky-item';
 
const App = () => {
  const data = ['Alice', 'Bob', 'Charlie', 'David', 'Eve'];
 
  return (
    <View style={{ flex: 1 }}>
      <FlatList
        data={data}
        renderItem={({ item }) => (
          <StickyItem
            stickyHeaderIndices={[0]}
            renderHeader={() => <Text>Header</Text>}
          >
            <Text>{item}</Text>
          </StickyItem>
        )}
        keyExtractor={(item) => item}
      />
    </View>
  );
};
 
export default App;

这个例子展示了如何在React Native应用中使用react-native-sticky-item库来创建一个带有固定头部的FlatList。stickyHeaderIndices属性用于指定哪些项应该被固定，renderHeader方法用于渲染固定的头部内容。这个例子简洁明了，并且教会了如何在实践中使用这个库。