底部抽屉组件(Bottom Sheet)安装及使用指南

最新推荐文章于 2025-04-28 07:00:00 发布

原创最新推荐文章于 2025-04-28 07:00:00 发布

· 473 阅读

9 ·

版权

底部抽屉组件(Bottom Sheet)安装及使用指南

bottom-sheet⬆️ A SwiftUI view component sliding in from bottom项目地址:https://gitcode.com/gh_mirrors/bo/bottom-sheet

项目介绍

底部抽屉组件（Bottom Sheet）是基于React Native开发的一款高性能交互式组件，它提供了完全可配置化的选项，适用于创建弹出式的菜单或对话框等UI元素。此组件由Gorhom维护，采用MIT许可协议发布，已在GitHub上获得了超过6.5K星标以及被超过730个仓库fork。

该组件支持自定义高度、动画效果以及内部子组件，能够轻松融入各种应用程序中，提供一致且流畅的用户体验。Bottom Sheet还利用了react-native-reanimated库来实现高效的动画渲染，确保在多种设备上都能保持良好的性能表现。

官方示例与文档

项目主页: https://github.com/gorhom/react-native-bottom-sheet

项目快速启动

要开始使用底部抽屉组件，首先需要将它添加到你的React Native项目中。这可以通过运行以下命令完成：

npm install @gorhom/bottom-sheet

或者如果你更喜欢yarn:

yarn add @gorhom/bottom-sheet

接下来，在你的React Native组件文件中引入并使用BottomSheet组件：

import React from 'react';
import { View } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const MyComponent = () => {
  const sheetRef = React.useRef(null);
  
  // 方法用来打开或关闭底部抽屉
  const snapPointByIndex = index => {
    if (index >= 0 && index < this.bottomSheet.snapPoints.length) {
      this.bottomSheet.current?.snapTo(index);
    }
  };

  return (
    <View style={{ flex: 1 }}>
      {/* 其他代码 */}
      
      <BottomSheet ref={sheetRef} index={0}>
        {/* 在这里放置你的内容 */}
        <Text>Hello World!</Text>
      </BottomSheet>
    </View>
  );
};

请注意上述代码中的ref属性是用来控制BottomSheet的行为，例如通过snapPointByIndex方法可以展开或折叠底部抽屉至预设位置。

应用案例和最佳实践

示例一：简单的底部菜单

import React from 'react';
import { Text, TouchableOpacity, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const App = () => {
  const sheetRef = React.useRef(null);

  return (
    <>
      <TouchableOpacity onPress={() => sheetRef.current?.expand()}>
        <Text>Open Bottom Sheet</Text>
      </TouchableOpacity>

      <BottomSheet ref={sheetRef}>
        <Text style={styles.container}>Bottom Sheet Content</Text>
      </BottomSheet>
    </>
  );
};

export default App;

这个例子展示了如何使用一个按钮来触发底部抽屉的显示。