Navigators(导航器)
Navigators允许您定义应用程序的导航结构。 Navigators还可以渲染通用元素,例如可以配置的标题栏和选项卡栏。
导航器是普通的React组件。
内建导航器
react-navigation
包含以下几个函数来帮助我们创导航:
- StackNavigator- 为app中的屏幕到堆栈最顶层转场提供了过度途径。
- TabNavigator- 用于设置具有多个选项卡的屏幕。
- DrawerNavigator- 用于设置抽屉导航屏幕。
使用Navigators渲染屏幕
导航器渲染仅仅是React组件的应用程序屏幕。
要了解如何创建屏幕,请阅读以下内容:
-
Screen
navigation
属性允许屏幕调度导航操作,例如打开另一个屏幕 -
Screen
navigationOptions
可以通过navigator自定义导航器显示屏幕的方式(例如标题标题,标签)
调用导航器顶层组件
如果你想从同一级别使用navigation,你可以使用react 的 ref
选项:
import { NavigationActions } from 'react-navigation';
const AppNavigator = StackNavigator(SomeAppRouteConfigs);
class App extends React.Component {
someEvent() {
// call navigate for AppNavigator here:
this.navigator && this.navigator.dispatch(
NavigationActions.navigate({ routeName: someRouteName })
);
}
render() {
return (
<AppNavigator ref={nav => { this.navigator = nav; }} />
);
}
}
请注意,这个解决方案只能用在顶级导航器上。
导航容器
当导航属性丢失时,内置导航器可以自动表现为根导航器。该功能提供了一个透明的导航容器,这是顶级导航属性的来源。
当渲染其中一个导航器时,导航属性是可选的。当它丢失时,容器进入并管理其自己的导航状态。它还处理URL,外部链接和Android后退按钮集成。
为了方便起见,内置的导航器具有这种能力,因为幕后他们使用createNavigationContainer。通常,导航器需要导航属性才能起作用。
根导航器接受以下属性:
onNavigationStateChange(prevState, newState, action)
每次由导航器管理的导航状态发生变化,该函数都会被调用。它接收到以前的状态,新的导航状态和发生状态变化的动作。默认情况下会将状态更改打印到控制台。
uriPrefix
应用程序可能会处理的URI的前缀。这将在处理深层链接( deep link以提取路径传递到路由器时使用。
网友评论