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参数，则表示您不必做任何事情。
如果不是，则表示您来自其他选项卡，并且它将导航到错误的路线。因此，您可以重置导航路线，也可以导航到“个人资料”路线。

注意：

我没有尝试这个解决方案，也许过渡动画不会顺利。所以告诉我它是否做得好。

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

1 个答案: