使用 @gorhom/bottom-sheet 反应本机应用程序崩溃

Question

我正在使用

@gorhom/bottom-sheet

显示带有背景组件的底部工作表，但它会使应用程序崩溃并给出此错误

错误类型错误：_$$_REQUIRE(_dependencyMap[1], "./_getTag") 不是 函数（未定义）

此错误位于： 在 TapGestureHandler 中（由 BottomSheetBackdropComponent 创建） 在 BottomSheetBackdropComponent 中 未知（由 BottomSheetBackdropContainerComponent 创建）

这是我的代码

import CustomButton from './custom-button';
import {
  Text,
  View,
  StatusBar,
  ScrollView,
  TouchableOpacity,
  Dimensions,
} from 'react-native';
import NavBar from '../components/navbar';
import Ionicons from 'react-native-vector-icons/Ionicons';
import FontAwesome from 'react-native-vector-icons/FontAwesome6';
import BottomSheet, {
  BottomSheetBackdrop,
  BottomSheetModal,
  BottomSheetView,
} from '@gorhom/bottom-sheet';
import {useCallback, useMemo, useRef, useState} from 'react';
import {StyleSheet} from 'react-native';
import {GestureHandlerRootView} from 'react-native-gesture-handler';
import {DataTable} from 'react-native-paper';
import SwitchSelector from 'react-native-switch-selector';

interface BottomSheetProps {
  bottomSheetRef: any;
  child: any;
  index: number;
  onDismiss?: Function;
}

const BottomSheetContainer = ({
  bottomSheetRef,
  child,
  index,
  onDismiss,
}: BottomSheetProps) => {
  const bottomSheetModalRef = useRef<any>(null);
  const snapPoints = useMemo(() => ['25%', '50%', '70%', '100%'], []);

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

  return (
    <BottomSheetModal
      index={index}
      onDismiss={() => {
        if (onDismiss) {
          onDismiss();
        }
      }}
      ref={bottomSheetRef}
      backdropComponent={renderBackdrop}
      enablePanDownToClose={true}
      snapPoints={snapPoints}>
      <View style={styles.contentContainer}>{child}</View>
    </BottomSheetModal>
  );
};

const styles = StyleSheet.create({
  contentContainer: {
    flex: 1,
    backgroundColor: 'white',
  },
});

export default BottomSheetContainer;

打开底部工作表模式后出现此错误。 如果我删除背景组件，它会很好地工作，但没有背景组件。需要背景组件。

Answer 1

您遇到的错误似乎与

react-native-gesture-handler

库有关。似乎无法正确识别或导入

TapGestureHandler

，从而导致您提到的错误。

npm install @gorhom/bottom-sheet react-native-gesture-handler

确保将其导入到文件顶部：

import { TapGestureHandler } from 'react-native-gesture-handler';

将您的组件包裹在这里：

<BottomSheetBackdrop appearsOnIndex={0} disappearsOnIndex={-1}>
  <TapGestureHandler>
    .
    .
    .
  </TapGestureHandler>
</BottomSheetBackdrop>