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是重新加载的

经验分享 程序员 微信小程序 职场和发展