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

Reanimated Bottom Sheet 是一个高度可配置的组件，它模拟了原生底部抽屉行为，并以其流畅的60 FPS原生动画为亮点。该组件基于react-native-gesture-handler和react-native-reanimated构建，无论你是 Expo 用户还是纯RN项目开发者，都能轻松集成。

功能演示

来看看这个组件的动态效果吧！

安装步骤

在你的项目根目录下，打开终端运行以下命令：

yarn add reanimated-bottom-sheet

如果你使用的是npm，可以运行：

npm install reanimated-bottom-sheet

接着，我们需要安装react-native-gesture-handler和react-native-reanimated。对于Expo用户，执行：

expo install react-native-gesture-handler react-native-reanimated

如果不是Expo项目，则运行：

yarn add react-native-reanimated react-native-gesture-handler

现在，你可以编译并运行你的应用啦！

使用方法

下面是一个简单的示例代码：

import * as React from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';
import Animated from 'react-native-reanimated';
import BottomSheet from 'reanimated-bottom-sheet';

export default function App() {
  const renderContent = () => (
    <View
      style={{
        backgroundColor: 'white',
        padding: 16,
        height: 450,
      }}
    >
      <Text>滑动关闭</Text>
    </View>
  );

  const sheetRef = React.useRef(null);

  return (
    <>
      <View
        style={{
          flex: 1,
          backgroundColor: 'papayawhip',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <Button
          title="打开底部抽屉"
          onPress={() => sheetRef.current.snapTo(0)}
        />
      </View>
      <BottomSheet
        ref={sheetRef}
        snapPoints={[450, 300, 0]}
        borderRadius={10}
        renderContent={renderContent}
      />
    </>
  );
}

属性详情

组件提供了丰富的自定义属性，如snapPoints、initialSnap等，详细列表见readme中Props部分。

应用场景

这款组件非常适合用于创建如下功能：

1. 设置面板
2. 导航菜单
3. 查看详细信息界面
4. 搜索表单

项目特点

• 高性能: 基于react-native-gesture-handler和react-native-reanimated，实现原生级别的60 FPS动画。
• 高度可定制: 可自定义设置抽屉的停靠点、初始状态、边角半径等。
• 无需额外依赖: 对于Expo用户，无需脱离Expo环境即可直接使用。
• 易于集成: 提供清晰的API文档和示例代码，简化开发流程。

总之，Reanimated Bottom Sheet 是一个强大且易用的底部抽屉解决方案，无论您是新手还是经验丰富的React Native开发者，都值得一试。立即尝试将它加入到您的项目中，提升用户体验，让底部抽屉交互更加顺畅自然吧！