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

Question

我对编程很陌生，当我导航到新屏幕时，底部的工作表没有关闭这是它的照片。我正在使用@gorhom/bottom-sheet^4，.I已经做了一些研究，我知道使用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>

Answer 1

没有什么方法可以做到这一点。这里有两个：

1. 添加当使用useFocusEffect的屏幕不聚焦时运行的BottomSheetModal：

useFocusEffect(
  React.useCallback(() => {
    return () => bottomSheetRef.current?.close()
  }, [])
);

1. 关闭BottomSheetModal，无论何时离开屏幕。为了做到这一点，您必须在导航时调用bottomSheetModalRef.current?.close： { navigation.navigate(" Settings ")；bottomSheetModalRef.current?.close()；}} >设置 {navigation.navigate(“已保存”)；bottomSheetModalRef.current?.close()；}} >已保存 { navigation.navigate(" Delete ")；bottomSheetModalRef.current?.close()；}} >删除

Answer 2

如果您使用的是React导航，您还可以在导航更改时自动关闭任何打开的调制解调器，如下所示：

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

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

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

           {...}

           </NavigationContainer>
}