模板版本：v0.4.0

react-native-scroll-bottom-sheet

本项目基于 react-native-scroll-bottom-sheet 开发。

支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-scroll-bottom-sheet 版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-scroll-bottom-sheet	~0.9.0（开发中）	@react-native-ohos/react-native-scroll-bottom-sheet Releases	0.82.*	否	API12+	0.7.0	Npm Address
@react-native-ohos/react-native-scroll-bottom-sheet	~0.8.0	@react-native-ohos/react-native-scroll-bottom-sheet Releases	0.77.*	否	API12+	0.7.0	Npm Address
@react-native-ohos/react-native-scroll-bottom-sheet	~0.7.1	@react-native-ohos/react-native-scroll-bottom-sheet Releases	0.72.*	否	API12+	0.7.0	Npm Address
@react-native-oh-tpl/react-native-scroll-bottom-sheet	<=0.7.0-0.0.1@deprecated	Github Releases(deprecated)	0.72.*	否	API12+	0.7.0	Npm Address

1. 安装与使用

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-scroll-bottom-sheet

yarn

yarn add  @react-native-ohos/react-native-scroll-bottom-sheet

下面的代码展示了这个库的基本使用场景：

import React, { useCallback, useMemo, useRef } from "react";
import {
  View,
  Text,
  SafeAreaView,
  StyleSheet,
  Animated,
  Dimensions,
  StatusBar,
  Pressable,
  Alert,
} from "react-native";
import ScrollBottomSheet from "react-native-scroll-bottom-sheet";
const WINDOW_HEIGHT = Dimensions.get("window").height;
export default function App() {
  const onSettleCallback = (index: number) => {
    console.log("handleSheetChanges", index);
  };
  const scrollRef = React.useRef(null);
  const data = useMemo(
    () =>
      Array(50)
        .fill(0)
        .map((_, index) => `index-${index}`),
    []
  );
  return (
    <View style={styles.screenbox}>
      <ScrollBottomSheet
        componentType="FlatList"
        snapPoints={[128, "40%", "60%"]}
        initialSnapIndex={2}
        renderHandle={() => (
          <View style={styles.header}>
            <View style={styles.panelHandle} />
          </View>
        )}
        //FlatList
        data={data}
        keyExtractor={(i) => i}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{`Item ${item}`}</Text>
          </View>
        )}
        onSettle={onSettleCallback}
        animationType={"spring"}
        animationConfig={{}}
        innerRef={scrollRef}
        enableOverScroll={false}
        containerStyle={styles.containerStyle}
        contentContainerStyle={styles.contentContainerStyle}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  screenbox: {
    height: "100%",
    backgroundColor: "papayawhip",
  },
  containerStyle: {
    fontSize: 18,
  },
  container: {
    flex: 1,
    padding: 24,
    backgroundColor: "grey",
  },
  header: {
    alignItems: "center",
    backgroundColor: "white",
    paddingVertical: 20,
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
  },
  panelHandle: {
    width: 40,
    height: 2,
    backgroundColor: "rgba(0,0,0,0.3)",
    borderRadius: 4,
  },
  item: {
    padding: 20,
    justifyContent: "center",
    backgroundColor: "white",
    alignItems: "center",
    marginVertical: 10,
  },
  contentContainerStyle: {
    padding: 16,
    backgroundColor: "#F3F4F9",
  },
  contentContainer: {
    flex: 1,
    alignItems: "center",
  },
});

2. Link

本库依赖以下三方库，请查看对应文档：

• @react-native-ohos/react-native-gesture-handler
• @react-native-ohos/react-native-reanimated
• @react-native-ohos/bottom-sheet

本库 HarmonyOS 侧实现依赖@react-native-ohos/react-native-reanimated、@react-native-ohos/react-native-gesture-handler 的原生端代码，如已在鸿蒙工程中引入过该库，则无需再次引入，可跳过本章节步骤，直接使用。

如未引入请参照@react-native-ohos/react-native-reanimated 文档、@react-native-ohos/react-native-gesture-handler 文档进行引入

3. 约束与限制

3.1. 兼容性

在以下版本验证通过：

1. RNOH: 0.72.33; SDK: OpenHarmony 5.0.0.71(API Version 12 Release); IDE: DevEco Studio 5.0.3.900; ROM: NEXT.0.0.71;
2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
3. RNOH: 0.82.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM: 6.0.0.328 SP26;

4. 属性

详情见react-native-scroll-bottom-sheet

Name	Description	Type	Required	Platform	HarmonyOS Support
componentType	组件类型（FlatList/ScrollView/SectionList）	string	yes	all	yes
snapPoints	一个由数字和/或百分比组成的数组，用于表示底部面板（bottom sheet）的不同停留位置（以 dp 或 % 为单位），从顶部开始计算。如果使用百分比，则对应的是整个窗口高度的相对比例。如果你希望该百分比基于父容器的可用空间来计算（例如为了适配安全区域或导航栏），可以将其与 topInset 属性配合使用	Array<string | number>	yes	all	yes
initialSnapIndex	抽屉初始停靠位置的索引，从顶部开始计数	number	yes	all	yes
renderHandle	拖拽手柄的渲染函数，需返回React元素	() => React.ReactNode	yes	all	yes
onSettle	底部弹窗停靠到某一 snapPoints 位置后的回调，返回当前索引	(index: number) => void	no	all	yes
animationType	动画类型：timing（默认）或 spring	string	no	all	yes
animationConfig	动画配置参数。timing 类型默认时长 250ms，缓动函数为 Easing.inOut(Easing.linear)；spring 类型使用默认弹簧配置。可按需部分覆盖任意参数	TimingConfig or SpringConfig	no	all	yes
animatedPosition	追踪抽屉位置的动画共享值	Animated.useSharedValue	no	all	yes
topInset	为 snapPoints 百分比计算提供偏移量（dp），用于适配安全区域或导航栏	number	no	all	yes
innerRef	内部可滚动组件（ScrollView/FlatList/SectionList）的引用，用于调用其命令式方法（如 scrollTo）	RefObject	no	all	yes
containerStyle	应用于容器（手柄和内容区）的样式	StyleProp<ViewStyle>	no	all	yes
friction	松手时的阻力系数：0 为最大加速（惯性甩动最远），1 则相反（几乎无惯性）	number	no	all	yes
enableOverScroll	允许抽屉被拖拽到最低停靠点以下	boolean	no	all	yes

5. Methods 方法

Name	Description	Type	Required	Platform	HarmonyOS Support
snapTo(index)	bottomSheetRef 为传递给 ScrollBottomSheet 组件的引用，调用后可跳转到指定索引的停靠位置	function	no	iOS/Android	yes

6. 遗留问题

7. 其他

• 本库基于@gorhom/bottom-sheet实现，详见issue#2
• 若想实现完全可配置选项的高性能交互式 ScrollBottomSheet，建议优先使用@gorhom/bottom-sheet。

8. 开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。