React Navigation 5.x第八章 导航器的生命周期

在之前的章节中，我们学会了使用stack导航器，其有两个页面（Home和Details），并且知道如何使用navigation.navigate（‘RouteName’）在两个路由之间跳转。

在这篇文章中，我们主要了解当我们离开Home页面的时候都发生了什么，以及当我们返回到这个这个的时候其又发生了什么？路由是如何知道用户离开或者返回到这个页面的。

如果你之前从事过web相关工作，然后过来学习React Navigation，你就会发现当用户从路由A跳转到路由B的时候，A将会被卸载（componentWillUnmount方法会被调用）当用户从其他页面返回A页面的时候，A页面又会被重新加载。React 的生命周期方法在React Navigation中仍然有效，之所以用法与web不尽相同是因为移动端导航更为复杂。

案例场景

假设有一个stack导航器，其有A、B两个页面。当跳转到A页面的时候，它的componentDidMount将会被调用。当跳转到B页面的时候，B页面的compouentDidMount也会被调用，但是A页面依然在堆栈中保持被加载的状态，因此其componentWillUnmount方法也没有被调用。

当我们从B页面返回到A页面的时候，B页面的compouentWillUnmount将会被调用，但是A页面的componentDidMount不会被调用，因为其没有被卸载，在整个过程中一直保持被加载的状态。

在其他类型的导航器中也是同样的结果，假设有一个tab导航器，其有两个tabs，每个tab就是一个stack导航器。

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="First">
          {() => (
            <SettingsStack.Navigator>
              <SettingsStack.Screen
                name="Settings"
                component={SettingsScreen}
              />
              <SettingsStack.Screen name="Profile" component={ProfileScreen} />
            </SettingsStack.Navigator>
          )}
        </Tab.Screen>
        <Tab.Screen name="Second">
          {() => (
            <HomeStack.Navigator>
              <HomeStack.Screen name="Home" component={HomeScreen} />
              <HomeStack.Screen name="Details" component={DetailsScreen} />
            </HomeStack.Navigator>
          )}
        </Tab.Screen>
      </Tab.Navigator>
    </NavigationContainer>
  );
}

现在我们从HomeScreen跳转到DetailsScreen页面，然后使用标签栏从SettingScreen 跳转到ProfileScreen。在这一系列操作做完后，所有的四个页面都已经被加载过了，如果你使用标签栏返回到HomeScreen，你会注意到你将到DetailsScreen页面----HomeStack的导航状态已经被保存

React Navigation生命周期事件

我们知道了在React Navigation中React 生命周期方法如何工作，现在就来回答一下最开始的问题：我们如何知道用户离开或者返回到当前页面呢？

React Navigation将事件发送到订阅他们的页面组件中，我们可以通过focus和blur方法监听用户离开返回事件。

function Profile({ navigation }) {
  React.useEffect(() => {
    const unsubscribe = navigation.addListener('focus', () => {
      // Screen was focused
      // Do something
    });

    return unsubscribe;
  }, [navigation]);

  return <ProfileContent />;
}

在导航事件中可以找到更多的API用例和可用的事件

我们没必要手动添加监听器，我们可以使用useFocusEffect 挂钩来实现，它就像React的useEffect挂钩，但是它只能用户导航器的生命周期。

import { useFocusEffect } from '@react-navigation/native';

function Profile() {
  useFocusEffect(
    React.useCallback(() => {
      // Do something when the screen is focused

      return () => {
        // Do something when the screen is unfocused
        // Useful for cleanup functions
      };
    }, [])
  );

  return <ProfileContent />;
}

如果你想根据页面是否获得焦点和失去焦点来渲染不同的东西，你可以调用useIsFocused 挂钩，这个会返回一个布尔值，用来指示该页面是否获得了焦点。

总结

• React 的生命周期方法仍然可用，除此之外React Navigation又增加了更多的事件，你可以通过navigation属性来订阅他们。
• 你也可以使用useFocusEffect或者useIsFocused倒钩。