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

【问题标题】：Bottom Sheet doesn't close when navigating to different screen导航到不同屏幕时底部工作表不会关闭
【发布时间】：2022-11-23 00:19:57
【问题描述】：

我是编程新手，当我导航到新屏幕时，底部工作表没有关闭here's the picture of it。我正在使用 @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

【解决方案1】：

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

添加useFocusEffect，当你的BottomSheetModal屏幕没有聚焦时运行：

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

离开屏幕时关闭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>

【讨论】：

【解决方案2】：

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

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

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

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

           {...}

           </NavigationContainer>
}

【讨论】：