React Native Bottom Sheet 使用指南：基础篇

React Native Bottom Sheet 使用指南：基础篇

react-native-bottom-sheet A performant interactive bottom sheet with fully configurable options 🚀 项目地址: https://gitcode.com/gh_mirrors/re/react-native-bottom-sheet

什么是 Bottom Sheet

Bottom Sheet 是一种常见的移动端 UI 组件，它从屏幕底部向上滑动显示内容，通常用于展示额外的操作选项、详细信息或表单等内容。在 React Native 生态中，gorhom/react-native-bottom-sheet 是一个功能强大且高度可定制的底部面板解决方案。

基础使用

让我们从一个最简单的非滚动内容示例开始，了解如何使用这个组件。

1. 引入组件

首先需要导入必要的组件和钩子：

import React, { useCallback, useMemo, useRef } from 'react';
import { View, Text, StyleSheet } from 'react-native';
import BottomSheet from '@gorhom/bottom-sheet';

2. 创建引用和状态

使用 useRef 创建一个对 BottomSheet 的引用，这将允许我们后续控制面板的行为：

const bottomSheetRef = useRef<BottomSheet>(null);

3. 定义停靠点

snapPoints 定义了 Bottom Sheet 可以停靠的位置。这里使用百分比表示：

const snapPoints = useMemo(() => ['25%', '50%'], []);

4. 处理变化回调

当用户拖动面板或面板状态改变时，会触发 onChange 回调：

const handleSheetChanges = useCallback((index: number) => {
  console.log('面板状态变化:', index);
}, []);

5. 渲染组件

最后，将 Bottom Sheet 组件添加到你的视图中：

<View style={styles.container}>
  <BottomSheet
    ref={bottomSheetRef}
    index={1}
    snapPoints={snapPoints}
    onChange={handleSheetChanges}
  >
    <View style={styles.contentContainer}>
      <Text>内容区域 🎉</Text>
    </View>
  </BottomSheet>
</View>

关键参数解析

1. snapPoints: 定义面板可以停靠的位置，可以是百分比或具体像素值
2. index: 初始显示的停靠点索引（从0开始）
3. onChange: 面板状态变化时的回调函数

样式设置

基础样式设置如下：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: 'grey',
  },
  contentContainer: {
    flex: 1,
    alignItems: 'center',
  },
});

实际应用场景

这种基础用法适合以下场景：

• 简单的菜单选择
• 显示少量信息的详情面板
• 需要用户确认的操作面板

进阶提示

当你的内容需要滚动时，需要使用特殊的处理方式，这涉及到 Scrollables 的概念。基础用法中的非滚动内容适合展示少量信息，而更复杂的内容展示则需要考虑滚动处理。

常见问题

1. 为什么我的 Bottom Sheet 不显示？

   • 确保容器有足够的空间（flex: 1）
   • 检查 snapPoints 设置是否合理

2. 如何控制 Bottom Sheet 的显示/隐藏？

   • 通过 ref 调用相关方法控制

3. 内容超出容器怎么办？

   • 对于长内容，需要使用可滚动容器

通过这篇指南，你应该已经掌握了 gorhom/react-native-bottom-sheet 的基础用法。下一步可以学习如何处理更复杂的滚动内容场景，以及如何自定义面板的外观和行为。

react-native-bottom-sheet A performant interactive bottom sheet with fully configurable options 🚀 项目地址: https://gitcode.com/gh_mirrors/re/react-native-bottom-sheet