React Navigation 参数不会重置

Question

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

MainTab
-- Home (stack)
-- Misc (stack)
-- Tips (stack)

在“主页”选项卡上，我有一个按钮可以转到“其他”，但我想转到“其他”的“提示”选项卡。
路由应该看起来像 - (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>
    )
  }
}

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

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

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

使用它来清除参数 react navigation

this.props.navigation.setParams({YOUR_PARAMS: null});