高性能React Native底部抽屉组件：Reanimated Bottom Sheet

import React from 'react';
import { Text, View } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';
import { ReanimatedBottomSheet } from 'reanimated-bottom-sheet';
 
const App = () => {
  // Bottom Sheet 控制状态
  const [visible, setVisible] = React.useState(false);
 
  // Bottom Sheet 配置
  const bottomSheetRef = React.useRef(null);
  const snapPoints = React.useMemo(() => ['25%', '50%', '85%'], []);
 
  // 打开 Bottom Sheet
  const showBottomSheet = () => {
    setVisible(true);
    bottomSheetRef.current.expand();
  };
 
  // 关闭 Bottom Sheet
  const hideBottomSheet = () => {
    setVisible(false);
    bottomSheetRef.current.collapse();
  };
 
  return (
    <View style={{ flex: 1, padding: 24 }}>
      {/* 触发按钮 */}
      <View style={{ alignItems: 'center', marginBottom: 24 }}>
        <Text onPress={showBottomSheet}>打开 Bottom Sheet</Text>
      </View>
 
      {/* Bottom Sheet 组件 */}
      <ReanimatedBottomSheet
        ref={bottomSheetRef}
        index={1}
        snapPoints={snapPoints}
        onChange={(index) => console.log(index)}
      >
        <View style={{ backgroundColor: 'white', padding: 24 }}>
          <Text>这里是 Bottom Sheet 内容</Text>
        </View>
      </ReanimatedBottomSheet>
    </View>
  );
};
 
export default App;

这个代码示例展示了如何使用reanimated-bottom-sheet库创建一个可以通过点击文本来打开和关闭的底部抽屉。这个抽屉可以通过点击不同的点位（即snap points）来展开到不同的高度。这个例子简单明了，并且使用了React Native的现代API。