React Native 如何实现吸顶效果

在React Native中实现吸顶效果，通常需要结合ScrollView和View的位置管理。以下是一个简单的示例，展示了如何实现一个吸顶效果：

import React from 'react';
import { ScrollView, View, Text, StyleSheet } from 'react-native';
 
const App = () => {
  const [stickyHeaderIndex, setStickyHeaderIndex] = React.useState(null);
 
  const renderItem = ({ item, index }) => {
    if (item === 'stickyHeader') {
      return (
        <View onLayout={(e) => setStickyHeaderIndex(index)}>
          <Text style={styles.stickyHeader}>吸顶头</Text>
        </View>
      );
    } else {
      return <Text style={styles.item}>{item}</Text>;
    }
  };
 
  const renderScrollComponent = (props) => (
    <ScrollView
      {...props}
      scrollEventThrottle={16}
      onScroll={({ nativeEvent }) => {
        if (stickyHeaderIndex !== null) {
          const position = nativeEvent.contentOffset.y;
          if (position >= stickyHeaderIndex * 50) {
            props.stickyHeaderIndex.current = stickyHeaderIndex;
          }
        }
      }}
    />
  );
 
  return (
    <View style={styles.container}>
      <ScrollView
        stickyHeaderIndex={React.useRef(null)}
        renderToHardwareTextureAndroid
        ListHeaderComponent={<View style={{ height: 150 }} />}
        ListFooterComponent={<View style={{ height: 100 }} />}
        renderScrollComponent={renderScrollComponent}
        contentContainerStyle={styles.list}
        keyExtractor={(item, index) => item + index}
      >
        {['Item 1', 'Item 2', 'Item 3', 'stickyHeader', 'Item 4', 'Item 5'].map(renderItem)}
      </ScrollView>
    </View>
  );
};
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  list: {
    paddingTop: 20,
  },
  item: {
    height: 50,
    backgroundColor: 'skyblue',
    borderBottomWidth: 1,
    borderBottomColor: 'lightgrey',
  },
  stickyHeader: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    height: 50,
    backgroundColor: 'lightsalmon',
  },
});
 
export default App;

在这个例子中，我们使用了ListHeaderComponent和ListFooterComponent来模拟长列表的头部和尾部，使得吸顶效果更加明显。renderItem函数用于渲染列表项，其中特定的item（'stickyHeader'）会被渲染为吸顶头。renderScrollComponent函数用于自定义ScrollView的渲染，并在滚动时更新吸顶头的位置。

请注意，这只是一个简化的示例，实际应用中可能需要更复杂的逻辑来处理边缘情况，例如多个吸顶头的情况。