如何在React Native中将元素固定在滚动上？

import React from 'react';
import { FlatList, Text, View, StyleSheet } from 'react-native';

const data = [
  { id: '1', title: 'Section 1' },
  { id: '2', title: 'Section 2' },
  // ...更多数据
];

const renderItem = ({ item }) => (
  <View style={styles.section}>
    <Text style={styles.title}>{item.title}</Text>
    {/* 其他内容 */}
  </View>
);

const App = () => (
  <FlatList
    data={data}
    renderItem={renderItem}
    keyExtractor={(item) => item.id}
    stickyHeaderIndices={[0]} // 第一个section将固定在顶部
  />
);

const styles = StyleSheet.create({
  section: {
    padding: 20,
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold',
  },
});

export default App;

import React from 'react';
import { ScrollView, Text, View, StyleSheet } from 'react-native';

const App = () => (
  <View style={styles.container}>
    <View style={styles.fixedHeader}>
      <Text>这是固定的头部</Text>
    </View>
    <ScrollView contentContainerStyle={styles.scrollContent}>
      {/* 滚动内容 */}
      <Text>滚动内容...</Text>
      {/* 更多内容 */}
    </ScrollView>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  fixedHeader: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 50,
    backgroundColor: 'blue',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1, // 确保它在滚动内容之上
  },
  scrollContent: {
    paddingTop: 50, // 为固定的头部留出空间
  },
});

export default App;