React Native Bottom Sheet 使用教程

React Native Bottom Sheet 使用教程

react-native-bottom-sheet The tiny 📦, smart 😎, and flexible 🎗 bottom sheet your app craves 项目地址: https://gitcode.com/gh_mirrors/rea/react-native-bottom-sheet

项目介绍

React Native Bottom Sheet 是一个高性能、交互式的底部弹出组件，适用于 React Native 应用。它提供了完全可配置的选项，支持多种手势操作和动画效果，能够无缝处理键盘事件，并且支持 React Native Web。该组件还支持 FlatList、SectionList、ScrollView 和 View 的滚动交互，并且可以与 React Navigation 集成。

项目快速启动

安装

首先，你需要在你的 React Native 项目中安装 @gorhom/bottom-sheet 包。你可以使用 npm 或 yarn 进行安装：

npm install @gorhom/bottom-sheet
# 或者
yarn add @gorhom/bottom-sheet

基本使用

以下是一个简单的示例，展示如何在 React Native 应用中使用 Bottom Sheet：

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

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

  const handleExpand = () => {
    bottomSheetRef.current?.expand();
  };

  const handleCollapse = () => {
    bottomSheetRef.current?.collapse();
  };

  return (
    <View style={{ flex: 1 }}>
      <Button title="Expand" onPress={handleExpand} />
      <Button title="Collapse" onPress={handleCollapse} />

      <BottomSheet
        ref={bottomSheetRef}
        index={0}
        snapPoints={['25%', '50%', '90%']}
      >
        <View style={{ flex: 1, backgroundColor: 'white' }} />
      </BottomSheet>
    </View>
  );
};

export default App;

主要配置项

• index: 初始的折叠点索引。
• snapPoints: 定义 Bottom Sheet 的折叠点，可以是百分比或具体的高度值。
• onChange: 当 Bottom Sheet 的折叠点发生变化时触发的回调函数。

应用案例和最佳实践

应用案例

1. 图片浏览器：使用 Bottom Sheet 展示图片的详细信息或操作选项。
2. 表单输入：在底部弹出表单，方便用户输入信息。
3. 导航菜单：在底部弹出导航菜单，提供更多的导航选项。

最佳实践

1. 合理设置 snapPoints：根据内容的高度合理设置折叠点，确保内容显示完整且用户体验良好。
2. 使用 onChange 回调：在 Bottom Sheet 状态变化时执行相应的逻辑，例如更新 UI 或保存数据。
3. 适配不同屏幕尺寸：确保 Bottom Sheet 在不同设备上都能正常显示和操作。

典型生态项目

1. React Navigation：与 React Navigation 集成，实现底部导航菜单的弹出效果。
2. React Native Reanimated：结合 Reanimated 实现更流畅的动画效果。
3. React Native Gesture Handler：使用 Gesture Handler 处理复杂的手势交互。

通过以上模块的介绍，你可以快速上手并深入使用 React Native Bottom Sheet 组件，提升你的 React Native 应用的用户体验。

react-native-bottom-sheet The tiny 📦, smart 😎, and flexible 🎗 bottom sheet your app craves 项目地址: https://gitcode.com/gh_mirrors/rea/react-native-bottom-sheet