如何在底部選項卡導航器 react-navigation 中卸載非活動屏幕？

Question

我將 react-navigation 用於 react-native。 是否有一個選項可以使非活動選項卡屏幕像在 DrawerNavigator 中的 unmountInactiveRoutes: true 一樣被卸載？ 我無法為 BottomTabNavigator 找到類似 unmountInactiveRoutes 的內容。

我在 BottomTabNavigator 中有兩個 stacknavigator，我想自動卸載它們。

• 底部標簽導航器
  • 堆棧1
    • 屏幕
    • 屏幕
  • 堆棧2
    • 屏幕
    • 屏幕

Answer 1

您可以通過在導航屏幕選項中添加選項來卸載底部選項卡中的屏幕：

unmountOnBlur: true

您可以在選項卡和抽屜導航中執行此操作，但不能在堆棧導航中執行此操作。

您還可以通過在選項卡或抽屜屏幕選項中添加相同的選項來添加卸載單個屏幕。

Answer 2

所以我不知道您是否可以親自卸載不活動的組件我沒有找到它但是這是我的解決方法withNavigationFocus(FocusStateLabel)並且如果isFocused為false。 返回 null。 所以這或多或少會給你你正在尋找的東西。 如果 isFocused 為真，您將渲染通常渲染的內容。 如果為 false，您將返回 null。 導致組件卸載

一些參考https://reactnavigation.org/docs/en/with-navigation-focus.html

Answer 3

我嘗試了 Ubaid 的答案，它有效。 但是你也可以試試這個：使用

import {useIsFocused} from '@react-navigation/native';
const isFocused = useIsFocused();
useEffect(() => {
    // Do whatever you want to do when screen gets in focus
  }, [props, isFocused]);

它工作得很好。

Answer 4

我找到了兩種卸載方式。

1. 第一種方法是使用useFocusEffect觸發卸載。 以我的經驗，這不是完全卸載組件。 它只會觸發卸載 function 來取消訂閱事件。 https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener

2. 第二種方法是在導航時完全卸載組件。 這個正在作為反應卸載。 https://reactnavigation.org/docs/bottom-tab-navigator/#unmountonblur

Answer 5

<Tab.Navigator screenOptions={{unmountOnBlur: true}}>
</Tab.Navigator>

在您的標簽屏幕中

const unMount = ()=>{
     //unmount what you want
}

useEffect(()=>{
     return unMount;
},[])

用這個修改你的代碼