React Navigation 参数不会重置

Question

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

主标签

-- 主页（堆栈）

-- 杂项（堆栈）

-- 提示（堆栈）

在“主页”选项卡上，我有一个转到“杂项”的按钮，但我想在转到“杂项”的途中转到“提示”选项卡。

路由应该看起来像 - (Home -> Tips -> Misc)

该按钮返回以下参数 -

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

传递这些参数后，我根据从主页选项卡上的按钮传递的 backRoute 和 routeImGoingNext 参数在提示屏幕的导航上呈现后退按钮和跳过按钮。

 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>
    )
  }
}

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

关于手动单击选项卡时如何重置参数的任何想法？

原文由 Keith 发布，翻译遵循 CC BY-SA 4.0 许可协议

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;
}

原文由 Keith 发布，翻译遵循 CC BY-SA 4.0 许可协议