使用TabNavigator时如何直接导航到初始路线？

Question

我正在使用来自TabNavigator的react-navigation。它工作正常，但我需要做一个小技巧。

当我在StackNavigator路线之间导航时，在更改标签后我需要我的路线直接进入初始路线。所以我需要重置路由状态。

const HomeStack = StackNavigator({
  Main: { screen: HomeScreen },
  Profile: { screen: ProfileScreen },


});

const AboutStack = StackNavigator({
  Main: { screen: AboutScreen },
});

TabNavigator(
  {
    Home: { screen: HomeStack },
    About: { screen: AboutStack },
  }

假设我从Main标签处于Home路线，然后在切换到Profile标签之前导航到About。当我回到Home选项卡时，我希望我的应用程序直接导航到Main路线并清除历史记录。就像重置一样。

有什么建议吗？

Answer 1

您可以在HomeStack的Profile路由中使用willFocus监听器。

监听器：

class Profile extends Component {
  componentDidMount() {
    this.didFocusListener = this.props.navigation.addListener(
      'didFocus',
      () => { console.log('did focus') },
    );
  }

  componentWillUnmount() {
    this.didFocusListener.remove();
  }

  render() {
    return ( /* your render */ );
  }
}

然后，如果你在Main，你正在导航到你的Profile路线。您应该在导航中设置一个参数，表示前一个路线是Main。

路线参数：navigation.navigate('Profile', { previous_screen: 'Main' });

所以现在在你的willFocus听众：

• 如果设置了previous_screen param，则意味着你不必做任何事情。
• 如果不是，则表示您来自其他选项卡，并且它将导航到错误的路径。因此，您可以重置导航路线，也可以导航到“个人资料”路线。

注意：

我没有尝试这个解决方案，也许过渡动画不会顺利。所以告诉我它是否能很好地完成工作。