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
<AppContainer
onNavigationStateChange={handleNavigationChange}
uriPrefix="/app"
/>
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 (
<AppContainer
ref={nav => {
this.navigator = nav;
}}
/>
);
}
}
在 Web 上使用 App Containers
在 web 上,你可以使用 createBrowserApp
和 handleServerRequest
来管理你的顶层 navigator 的 state。