模板版本：v0.2.2

react-native-scroll-bottom-sheet

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：

三方库版本	发布信息	支持RN版本
~0.8.0	@react-native-ohos/react-native-scroll-bottom-sheet Releases	0.77.*
~0.7.1	@react-native-ohos/react-native-scroll-bottom-sheet Releases	0.72.*
<=0.7.0-0.0.1@deprecated	@react-native-oh-tpl/react-native-scroll-bottom-sheet Releases	0.72.*

对于未发布到npm的旧版本，请参考安装指南安装tgz包。

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

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",
  },
});

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 文档进行引入

约束与限制

兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：

三方库版本	发布信息	支持RN版本
~0.8.0	@react-native-ohos/react-native-scroll-bottom-sheet Releases	0.77.*
~0.7.1	@react-native-ohos/react-native-scroll-bottom-sheet Releases	0.72.*
<=0.7.0-0.0.1@deprecated	@react-native-oh-tpl/react-native-scroll-bottom-sheet Releases	0.72.*

属性

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

Name	Description	Type	Required	Platform	HarmonyOS Support
componentType	'FlatList', 'ScrollView', or 'SectionList'	string	yes	all	yes
snapPoints	Array of numbers and/or percentages that indicate the different resting positions of the bottom sheet (in dp or %), starting from the top. If a percentage is used, that would translate to the relative amount of the total window height. If you want that percentage to be calculated based on the parent available space instead, for example to account for safe areas or navigation bars, use it in combination with topInset prop	Array<string | number>	yes	all	yes
initialSnapIndex	Index that references the initial resting position of the drawer, starting from the top.	number	yes	all	yes
renderHandle	Render prop for the handle, should return a React Element	() => React.ReactNode	yes	all	yes
onSettle	Callback that is executed right after the bottom sheet settles in one of the snapping points. The new index is provided on the callback	(index: number) => void	no	all	yes
animationType	timing (default) or spring	string	no	all	yes
animationConfig	Timing or Spring configuration for the animation. If animationType is timing, it uses by default a timing configuration with a duration of 250ms and easing fn Easing.inOut(Easing.linear). If animationType is spring, it uses this default spring configuration. You can partially override any parameter from the animation config as per your needs	TimingConfig or SpringConfig	no	all	yes
animatedPosition	Animated value that tracks the position of the drawer	Animated.useSharedValue	no	all	yes
topInset	This value is useful to provide an offset (in dp) when applying percentages for snapping points	number	no	all	yes
innerRef	Ref to the inner scrollable component (ScrollView, FlatList or SectionList), so that you can call its imperative methods. For instance, calling scrollTo on a ScrollView.	RefObject	no	all	yes
containerStyle	Style to be applied to the container (Handle and Content)	StyleProp<ViewStyle>	no	all	yes
friction	Friction is the damping coefficient (0 to 1). The closer the damping coefficient is to 1, the more obvious the sliding trend is when the finger continues to slide to the bottom node.	number	no	all	yes
enableOverScroll	Allow drawer to be dragged beyond lowest snap point	boolean	no	all	yes

Methods 方法

Name	Description	Type	Required	Platform	HarmonyOS Support
snapTo(index)	bottomSheetRef refers to the ref passed to the ScrollBottomSheet component.	function	no	iOS/Android	yes

遗留问题

其他

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

开源协议

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