Question

我一直在使用react-navigation一段时间了。当我在Expo上尝试引用这个Snack时，我意识到如果我在选项卡中导航，那么我无法通过按Tabbar上的Home按钮导航回Home Tab屏幕。我必须单击屏幕上的“返回”按钮才能导航回家。

这是一段代码：

const HomeStack = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

const SettingsStack = StackNavigator({
    Settings: { screen: SettingsScreen },
    Details: { screen: DetailsScreen },
});

export default TabNavigator({
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
});

参考上面的代码，如果我从标签栏中点击Settings，然后导航到该堆叠中的Details，那么当我点击{{{}时，我无法导航回Settings 1}}再次。我必须单击屏幕顶部的“返回”按钮。

这里有什么问题？

Answer 1

选项卡导航器按钮仅在显示的视图之间切换。由于您在堆栈导航器中导航，这就是您所看到的内容。

如果要添加每次按下选项卡按钮时重置堆栈的功能，可以通过提供自己的选项卡组件然后在堆栈导航器上调用reset来实现。

Answer 2

为每条新路线使用唯一名称是个好主意。 React Navigation使用这些名称作为唯一键来区分路径。我在您的默认Settings中看到TabNavigator，在Settings SettingsStack看到另一个StackNavigator。 Details也是如此。（简单重命名也可以解决您的问题，不确定）。

以您的示例为例（并将Settings重命名为SettingsScreen），

const HomeStack = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

const SettingsStack = StackNavigator({
    SettingsScreen: { screen: SettingsScreen },
    Details: { screen: DetailsScreen },
});

export default TabNavigator({
    Home: { screen: HomeStack },
    Settings: { screen: SettingsStack },
});

现在，从SettingsScreen＆gt;返回Settings Details，您可能想尝试

dispatch(NavigationActions.navigate({
  routeName: 'Settings',
  action: NavigationActions.navigate({ routeName: 'SettingsScreen' })
}))

这个想法是，在嵌套导航器的情况下，如果你想通过父回到另一个屏幕，你应该以嵌套的方式调用Navigations.navigate两次。

这是在他们的文档中的某个地方。我会尽快在这里添加链接以供参考。

Answer 3

mail_message

导航到tabnavigator内的根选项卡屏幕 - React Navigation

3 个答案: