如何在React Native中修复@gorhom/bottom-sheet的高度

Question

我正在使用@gorhom/bottom-sheet 库。我有一份物品清单。当项目变得越来越多时，列表会增加和减少，模式将超出屏幕。模态顶部变得不可见。

import React, { useCallback, useEffect, useRef, useState } from "react"
import { ModalOptions } from "./modal.context"
import { Image, useWindowDimensions, View } from "react-native"
import { KeyboardAwareScrollView } from "react-native-keyboard-aware-scroll-view"
import {
  BottomSheetBackdrop,
  BottomSheetBackdropProps,
  BottomSheetBackgroundProps,
  BottomSheetFooter,
  BottomSheetFooterProps,
  BottomSheetModal,
  BottomSheetModalProps,
  BottomSheetScrollView,
} from "@gorhom/bottom-sheet"
import { AppConfig } from "../../app/app.config"
import { useOrientation } from "../../hook/use-orientation.hook"

export function Modal({
  isOpened,
  close,
  options,
  ...props
}: {
  isOpened: boolean
  close: () => void
  options: ModalOptions
} & Omit<BottomSheetModalProps, "children">) {
  // ---------------------------------------------------------------------------
  // variables
  // ---------------------------------------------------------------------------

  const { width, height } = useWindowDimensions()
  const orientation = useOrientation()
  const ref = useRef<BottomSheetModal>(null)
  const [isKeyboardVisible, setKeyboardVisible] = useState(false)
  const keyboard = options.keyboard ? options.keyboard : "100%"

  // ---------------------------------------------------------------------------
  // effects
  // ---------------------------------------------------------------------------

  useEffect(() => {
    if (!ref.current) return
    if (!isOpened) {
      if (options?.onClose) {
        options.onClose()
      }

      ref.current.dismiss()
    } else {
      ref.current.present()
    }
  }, [isOpened, options])

  const renderBackdrop = useCallback(
    (props: BottomSheetBackdropProps) => (
      <BottomSheetBackdrop
        {...props}
        disappearsOnIndex={-1}
        appearsOnIndex={0}
        opacity={0.6}
      />
    ),
    [],
  )

  const renderBackgroundWithPattern = useCallback(
    (props: BottomSheetBackgroundProps) => {
      return (
        <View
          style={[
            props.style,
            {
              backgroundColor: "white",
              borderTopLeftRadius: 15,
              borderTopRightRadius: 15,
            },
          ]}
        >
          <Image
            source={require("../../../public/images/icons_bg.png")}
            style={{
              position: "absolute",
              width: "100%",
              height: 70,
              zIndex: -1,
              top: 0,
              resizeMode: "cover",
            }}
          />
        </View>
      )
    },
    [],
  )

  const renderFooter = useCallback((props: BottomSheetFooterProps) => {
    return (
      <BottomSheetFooter
        {...props}
        style={{
          height: "100%",
          justifyContent: "flex-end",
        }}
      >
        <View pointerEvents="none">
          <Image
            source={require("../../../public/images/rainbow_footer_small_3.png")}
            style={{
              width: 153,
              height: 127.5,
            }}
          />
        </View>
      </BottomSheetFooter>
    )
  }, [])

  // ---------------------------------------------------------------------------
  // functions
  // ---------------------------------------------------------------------------

  function getMarginHorizontal() {
    if (AppConfig.isTablet) {
      return orientation === "landscape" ? width / 3 : width / 4
    } else {
      return orientation === "landscape" ? width / 4 : 0
    }
  }

  // ---------------------------------------------------------------------------
  return (
    <BottomSheetModal
      index={0}
      backdropComponent={renderBackdrop}
      onDismiss={() => close()}
      enableDismissOnClose={true}
      contentHeight={options.height}
      {...props}
      ref={ref}
      // enableOverDrag={false}
      snapPoints={isKeyboardVisible ? [keyboard] : props.snapPoints}
      enableDynamicSizing={isKeyboardVisible ? false : true}
      style={[
        options.style,
        {
          marginHorizontal: getMarginHorizontal(),
        },
      ]}
      backgroundComponent={
        options.background === "pattern"
          ? renderBackgroundWithPattern
          : undefined
      }
      footerComponent={options.footer === "rgb" ? renderFooter : undefined}
      handleStyle={options.handleStyle}
      containerStyle={[options.containerStyle]}
      backgroundStyle={options.backgroundStyle}
      handleIndicatorStyle={[
        options.handleIndicatorStyle,
        { backgroundColor: "#E6E6E6" },
      ]}
      // onChange={handleSheetChanges}
    >
      {/* todo: remove ScrollView once https://github.com/gorhom/react-native-bottom-sheet/issues/1573 fixed */}
      <BottomSheetScrollView scrollEnabled={options.scrollEnabled}>
        <KeyboardAwareScrollView
          contentContainerStyle={{ flexGrow: 1 }}
          scrollEnabled={false}
          enableResetScrollToCoords={true}
          keyboardShouldPersistTaps="handled"
          onKeyboardWillShow={() => setKeyboardVisible(true)}
          onKeyboardWillHide={() => setKeyboardVisible(false)}
        >
          <View>{options.component}</View>
        </KeyboardAwareScrollView>
      </BottomSheetScrollView>
    </BottomSheetModal>
  )
}

我尝试为 flex: 1 提供容器样式，但没有帮助。我还将 topInset 添加到 BottomSheetModal 但没有解决问题。 我无法滚动列表。页脚消失了。 如何修复它？如果有人帮助我，我将不胜感激！！

Answer 1

从 'react' 导入 React, { useRef, useMemo, useCallback }; 从“some-library”导入{BottomSheetModal}； // 假设“some-library”是 BottomSheetModal 的导入位置

const YourComponent = () => { const BottomSheetModalRef = useRef(null);

// Define snap points for the bottom sheet modal
const snapPoints = useMemo(() => [0.01, '60%', '95%'], []);

// Function to handle pressing to present the modal
const handlePresentModalPress = useCallback(() => {
    // Snap the modal to the second snap point (index 1)
    bottomSheetModalRef.current?.snapToIndex(1);
}, []);

return (
    // Your component JSX
    <div>
        {/* Your component content */}
    </div>
);

};

导出默认的YourComponent；