React Navigation 参数不会重置 [英] React Navigation params doesn't reset

问题描述

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

I'm having trouble with resetting the navigation params to null in React Native.

主标签
-- 主页(堆栈)
-- 杂项(堆栈)
-- 提示(堆栈)

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

在主页"选项卡上，我有一个按钮可以转到其他"，但我想转到其他"的提示"选项卡.
路由应该看起来像 -(主页 -> 提示 -> 其他)
该按钮返回以下参数 -

On the Home tab, I have a button to go to Misc, but I want to route to the Tips tab on route to Misc.
Routing should look like - (Home -> Tips -> Misc)
That button returns the following with params -

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

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

When these params are passed, I render a back button and a skip button on the Tips screen's navigation based on the backRoute and routeImGoingNext params that were passed from the button on the Home tab.

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

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

My problem occurs when I click the Tips tab after I've already clicked the the button on the Home tab. The params are still set and therefore rendering a back button and skip button, but there shouldn't be those buttons if I click the Tips tab.

当您手动点击选项卡时如何重置参数有什么想法吗?

Any ideas on how to reset the params when you manually click on the tabs?

推荐答案

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

I was able to clear the params by manually creating a function and setting the params that are passed to null. The clearParams function is called when the header button is pressed.

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

这篇关于React Navigation 参数不会重置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！