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

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

关于如何在手动单击选项卡时重置参数有什么想法吗？

Answer 1

这对我有用，直接来自文档。请注意，这会重置整个导航状态（道具/路线/参数等...）。就我而言，这很好。

https://reactnavigation.org/docs/navigation-prop/

    props.navigation.reset({
        index: 0,
        routes: [{name: "Screen you need to go back to"}]
    });

我的应用程序是一个简单的 3 屏幕应用程序，使用反应导航“底部选项卡导航器”进行反应。我的所有组件都是功能组件，因此我没有使用文档这一部分中的任何导航操作：https://reactnavigation.org/docs/navigation-actions。

请参阅下面的堆栈导航。在上面的代码 sn-p 中，index: 0 将是下面的屏幕名称“SetGame”。 index: 1 是“PlayGame”， index: 2 是“历史”。就我而言，我正在导航回索引 0，即“SetGame”并在导航状态对象中重置路线/参数/历史记录。

    <Tab.Navigator
  initialRouteName="Find"
  tabBarOptions={{
    tabStyle: {
      backgroundColor: '#76B947',
      height: 90,
      paddingBottom: 30,
      margin: 0,
    },
    style: {
      height: 90,
    },
    activeTintColor: '#292929',
    inactiveTintColor: '#ededed',

  }}
>
  <Tab.Screen
    name="SetGame"
    component={SetGame}
    options={{
      tabBarIcon: ({ color }) => (
        <Feather name={'list'} size={25} color={color} />
      ),
    }}
  />
  <Tab.Screen
    name="PlayGame"
    component={PlayGame}
    options={{
      tabBarIcon: ({ color }) => (
        <Feather name={'play'} size={25} color={color} />
      ),
    }}
  />
  <Tab.Screen
    name="History"
    component={GameHistory}
    options={{
      tabBarIcon: ({ color }) => (
        <Feather name={'save'} size={25} color={color} />
      ),
    }}
  />
</Tab.Navigator>

在我的应用程序中，PlayGame 组件中有一个 goBackToSetGame 函数。这意味着我们要重置我们的游戏，清除数据库中的数据并重置导航状态。基本上禁止用户玩游戏，直到重新设置。

    const goBackToSetGame = async () => {
    const gameInputs = {
      email: user.profile.email,
      players: [],
      holes: [],
      names: [],
      createdAt: Date.now(),
      gameStatus: "not-playing",
      scores: [{}]
    }

    await API.QuitGame(gameInputs).then((res) => {
      // reset scores state if the game is quit
      setScores(null);
      console.log("Changed gameStatus from server response: ", 
    res.data)
    })
    .catch(err => console.log(err));

    // reset props.navigation so you have to 
    // start a new game before coming back to this screen
    props.navigation.reset({
      index: 0,
      routes: [{name: "SetGame"}]
    });
 }

Answer 2

我也遇到过这个问题，我在文档中发现参数是浅合并的，所以如果你有一些来自以前导航的婴儿车，然后你用不同的参数导航到同一个屏幕，那么它们将被合并。 这是文档的链接https://reactnavigation.org/docs/params 简单的例子是：

navigation.navigate('Receipt', {id: '001', eventId: 'eventIdMock');

如果我使用此参数导航到收据，则从另一个屏幕：

navigation.navigate('Receipt', {id: '002'});

那么导航仍然会有eventId: 'eventIdMock' 所以解决方案是将此值显式设置为null 或undefined

navigation.navigate('Receipt', {id: '002', eventId: null});

Answer 3

使用它来清除react navigation中的参数

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

Answer 4

我能够通过手动创建函数并将传递给 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;
}