React Navigation params不会重置

Question

我在React Native中将导航参数重置为null时遇到问题。

MainTab - 家（堆栈） - 其他（堆叠） - 提示（堆栈）

在主页选项卡上，我有一个按钮可以转到杂项，但我想要路由到Misc的路径上的提示选项卡。 路由应该看起来像 - （主页 - >提示 - >其他） 该按钮以params返回以下内容 -

this.props.navigation.navigate('Tips', {backRoute: 'Home', routeImGoingNext: 'Misc'});

当这些参数传递完成后，我会根据从Home选项卡上的按钮传递的backRoute和routeImGoingNext参数，在Tips屏幕的导航上渲染一个后退按钮和一个跳过按钮。

if(navigation.state.params && navigation.state.params.backRoute){
  return {
    headerLeft: (<HeaderBackButton onPress={()=>navigation.navigate(navigation.state.params.backRoute)}/> ),
    headerRight: (
      <TouchableOpacity onPress={()=>navigation.navigate(navigation.state.params.routeImGoingnext)}>
        <Text style={{paddingRight: 10}}> Skip </Text>
      </TouchableOpacity>
    )
  }
}

在我单击“主页”选项卡上的按钮后单击“提示”选项卡时，会出现问题。 params仍然设置，因此呈现后退按钮和跳过按钮，但如果单击“提示”选项卡，则不应该有这些按钮。

手动点击标签时如何重置参数的任何想法？

Answer 1

我能够通过手动创建一个函数并设置传递给null的参数来清除参数。按下标题按钮时会调用clearParams函数。

static navigationOptions = ({navigation}) => {

  clearParams = () => {
    navigation.setParams({backRoute: null, routeImGoingNext: null})
  }

  if(navigation.state.params && navigation.state.params.backRoute){  

    const { backRoute, routeImGoingNext } = navigation.state.params;

    return {
      headerLeft: (<HeaderBackButton onPress={()=>{navigation.navigate(backRoute), clearParams()}}/> ),
      headerRight: (
        <TouchableOpacity onPress={()=>{navigation.navigate(routeImGoingNext), clearParams() }}>
          <Text style={{paddingRight: 10}}> Skip </Text>
        </TouchableOpacity>
      )
    }
  }
 return;
}

Answer 2

你试着查看这篇文章，会解决你的想法

https://reactnavigation.org/docs/en/stack-actions.html