React Navigation之App containers使用

App containers

App 容器负责管理应用的 state, 并将顶层的 navigator 链接到整个应用环境。 在 Android 上, App 容器使用链接 API 来处理返回键。 还可以配置容器，用于导航状态的持久化。 在 web 上, 您将使用与 React Native 不同的容器。

注意: 在 React Navigation v2 和更早版本中， React Navigation 中的容器由 create*Navigator 函数自动提供， 从React Navigation v3 开始, 需要直接使用容器。 在第3节中, 我们还将 createNavigationContainer 重命名为 createAppContainer。

关于 createAppContainer 的一个简单示例：

import { createAppContainer, createStackNavigator } from 'react-navigation';
// you can also import from @react-navigation/native

const AppNavigator = createStackNavigator(...);

const AppContainer = createAppContainer(AppNavigator);

// Now AppContainer is the main component for React to render

export default AppContainer;

React Native 中的 createAppContainer prop

onNavigationStateChange(prevState, newState, action)

每当导航器管理的 navigation state 发生变化时，都会调用该函数。 它接收之前的 state、navigation 的新 state 以及发布状态更改的 action。 默认情况下，它将 state 的更改打印到控制台。

uri前缀

应用可能会处理的 URI 前缀， 在处理一用于提取传递给 route 的一个 深度链接时将会用到。

在 App 容器中 调用 Dispatch 和 Navigate（常用）

如果你想在 App 容器中使用 dispatch，你可以使用 ref 来调用 dispatch 方法：

const AppContainer = createAppContainer(AppNavigator);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this.navigator &&
      this.navigator.dispatch(
        NavigationActions.navigate({ routeName: someRouteName })
      );
  }
  render() {
    return (
       {
          this.navigator = nav;
        }}
      />
    );
  }
}

在 Web 上使用 App Containers

在 web 上，你可以使用 createBrowserApp 和 handleServerRequest来管理你的顶层 navigator 的 state。