导航到不同屏幕时底部工作表不会关闭

问题描述 投票:0回答:5

我是编程新手,当我导航到新屏幕时,底部工作表未关闭这是它的图片。我正在使用

@gorhom/bottom-sheet^4
。我做了一些研究,我知道使用
useFocusEffect
可以实现它,但我真的不知道如何实现。有人可以帮我解决这个问题吗?

<BottomSheetModal
    enablePanDownToClose={true}
    ref={bottomSheetModalRef}
    index={0}
    snapPoints={snapPoint}
    backdropComponent={renderBackdrop}
  >
    <View>
      <TouchableWithoutFeedback
        onPress={() => {
          navigation.navigate("Settings");
        }}
      >
        <Text style={styles.modalText}>Settings</Text>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback
        onPress={() => {
          navigation.navigate("Saved");
        }}
      >
        <Text style={styles.modalText}>Saved</Text>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback
        onPress={() => {
          navigation.navigate("Delete");
        }}
      >
        <Text style={styles.modalText}>Delete</Text>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={() => {}}>
        <Text style={styles.modalText}>Log out</Text>
      </TouchableWithoutFeedback>
    </View>
  </BottomSheetModal>
react-native react-navigation bottom-sheet
5个回答
4
投票

有几种方法可以做到这一点。这里有两个:

  1. 添加 useFocusEffect,当带有
    BottomSheetModal
    的屏幕未聚焦时运行:
useFocusEffect(
  React.useCallback(() => {
    return () => bottomSheetRef.current?.close()
  }, [])
);
    每当您离开屏幕时,
  1. 关闭

    BottomSheetModal
    。为此,您必须在导航时调用
    bottomSheetModalRef.current?.close

    <TouchableWithoutFeedback
     onPress={() => {
       navigation.navigate("Settings");
       bottomSheetModalRef.current?.close();
     }}
    >
     <Text style={styles.modalText}>Settings</Text>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback
     onPress={() => {
       navigation.navigate("Saved");
       bottomSheetModalRef.current?.close();
     }}
    >
     <Text style={styles.modalText}>Saved</Text>
    </TouchableWithoutFeedback>
    <TouchableWithoutFeedback
     onPress={() => {
       navigation.navigate("Delete");
       bottomSheetModalRef.current?.close();
     }}
    >
     <Text style={styles.modalText}>Delete</Text>
    </TouchableWithoutFeedback>
    

1
投票

如果您使用 React Navigation,您还可以在导航发生变化时自动关闭任何打开的模式,如下所示:

import { useBottomSheetModal } from '@gorhom/bottom-sheet'

const Navigation = () => {
    const { dismissAll: dismissAllModals } = useBottomSheetModal()

    return <NavigationContainer  
            onStateChange={() =>
                dismissAllModals()
            }>

           {...}

           </NavigationContainer>
}

0
投票
actionSheetRef.current.hide();

0
投票

只需将

backdropComponent
属性添加到 BottomSheet 组件即可。背景组件将接收指示工作表位置和索引的动画道具

背景组件在底部表单模式打开并动画后出现,如果您使用此组件,如果您单击任意位置,

bottomsheet
将会消失

以下是使用backgroundComponent 属性的一些示例:

 import BottomSheet, { BottomSheetBackdrop } from '@gorhom/bottom-sheet';
  const renderBackdrop = useCallback(
    (props: any) => (
      <BottomSheetBackdrop
        enableTouchThrough={false}
        pressBehavior={"close"}
        appearsOnIndex={0}
        disappearsOnIndex={-1}
        {...props}
      />
    ),
    []
  );

  <BottomSheet backdropComponent={renderBackdrop}/>

0
投票

虽然 Ryan 的答案是正确的,但如果您使用 Expo 和 Expo Router,则可以执行此操作。

...
const { dismissAll: dismissAllModals } = useBottomSheetModal();
const pathname = usePathname();
const params = useGlobalSearchParams();

useEffect(() => {
   dismissAllModals();
}, [pathname, params]);
...
© www.soinside.com 2019 - 2024. All rights reserved.