react-native界面跳转dispatch
背景
在react-native应用中,有三个页面 A,B,C三个页面,现在需要,从A跳转到B,从B跳转到C ,从C可以再跳转到B,此种跳转需要重新加载B;也可以返回到B,此种跳转不需要重新加载B,但是只要在B页面,返回的话就都是返回到A。
路由栈示意图
在react-native中,页面都是放在路由栈里面的,上述描述的现象在路由栈中的位置如 下
由于从C跳转到B这一步,要求需要重新加载B,所以需要使用push方法,将一个新的B页面押入栈,从而执行B页面的相关逻辑。如果从C跳转到B我们用navigate方法,那么其方式就相当于goback方法,从C回到已经入栈的B页面,此时不会重新执行B页面的相关逻辑,不符合要求。但是我们用push从C跳转到B后,此时,从B返回,则会直接回到C页面,而不会返回到A页面。因此我们考虑能不能从C跳转到B,既能重新加载B页面,又能使得B页面上一个页面变成A页面?
dispatch方法
const resetAction = StackActions.reset({ index: 1, actions: [ NavigationActions.navigate({ routeName: "A"}), NavigationActions.navigate({ routeName: "B",params:{ title: "B", }}) ]} ) this.props.navigation.dispatch(resetAction);
以上就可以将路由栈重置,当路由栈中有A B C时,可变成 A B,同时,B是重新加载的