到此为止关于navigation新路由的实现基本告一段落,最后我们来看一下怎样重置路由和如何返回堆栈中的任意页面实现。
1.首先我们看如何重置路由,如下代码所示,NavigationActions提供了reset方法,通过reset方法可以重置整个路由栈。这里要注意,重置后路由栈顺序就是actions中定义的顺序,index参数代表路由被重置后,默认显示的页面。
resetActions(){
//这个方法是重置了整个路由栈信息,那我们要在actions中重新定义路由栈,下面的的index参数代表新路由栈默认显示的页面
const resetAction = NavigationActions.reset({
index: 1,
actions: [
NavigationActions.navigate({ routeName: 'ReactNavigation'}),
NavigationActions.navigate({ routeName: 'profile'})
]
})
this.props.navigation.dispatch(resetAction)
}
2.goback方法。
前面我们知道返回上一级页面可以使用goBack(null)来实现。而返回指定页面则需要
使用goBack(key)来实现,但是Navigation并没有提供一个获取key的方法,这里我们结合了redux来实现,返回指定页面。
const MainApp = () => <MyApp uriPrefix={'kingdomYrt://kingdomYrt/'} onNavigationStateChange={(prevNav, newNav, action) => {
console.group('Navigation Dispatchssss: ');
console.log('Action: ', action);
console.log('New State: ', newNav);
console.log('Last State: ', prevNav);
console.groupEnd();
nav.routes = newNav.routes;
}}/>
goBack(routeName ){
let routes = nav.routes;
routes.forEach(function(item) {
if(item.routeName === routeName ){
const { goBack } = this.props.navigation;
goBack(item.key);
}
}, this);
}
这里我们可以看到 通过onNavigationStateChange,我们能够获取到最新的routes,而这个routes数组里记载了每个栈信息,包括(name/params/key)等。这样子通过这种方法我们就可以拿到key,进而想返回哪里就通过对应的name取key。
这里我们要改一下源码,如下图所示,这句代码加了“1”,如果不加的话,使用goBack(routeName ),就会把routeName 这个栈一起退出了。
是不是感觉非常棒!下一节我们着重讲一下如何集成redux。