如何在底部选项卡导航器 react-navigation 中卸载非活动屏幕？

Question

Im using react-navigation for react-native. Is there an option to make that inactive tab screens get unmounted like unmountInactiveRoutes: true in DrawerNavigator?? I cant find something like unmountInactiveRoutes for BottomTabNavigator.

I have two stacknavigators inside a BottomTabNavigator and I want to unmount them automatically.

• BottomTabNavigator
  • Stack1
    • Screen
    • Screen
  • Stack2
    • Screen
    • Screen

Answer 1

You can unmount screens in bottom tab by adding option in navigation screenOptions:

unmountOnBlur: true

You can do it in Tab & Drawer Navigations but not in Stack Navigation.

And you can also add unmount individual screen by adding same option in Tab or Drawer Screen option.

Answer 2

So I don't know if you can unmount components that are inactive personally I did not find it however this is my workaround withNavigationFocus(FocusStateLabel) and if isFocused is false. returning null. So this will give you more or less what you are looking for. If isFocused is true, you'll render what you usually render. If false you'll return null. resulting in the unmounting of your components

Some reference https://reactnavigation.org/docs/en/with-navigation-focus.html

Answer 3

I tried Ubaid's answer it works. But you can try this one too: Use

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

It works perfectly fine.

Answer 4

I found two way unmount.

1. First method is just trigger the unmount using useFocusEffect . With my experience this is not completely unmount component. It just trigger only unmount function to unsubscribe events. https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener

2. Second method is completely unmount component when the navigating. This one is working as react unmount. https://reactnavigation.org/docs/bottom-tab-navigator/#unmountonblur

Answer 5

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

In your tab screens

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

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

Modify your code with this