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

Question

我使用 react-navigation 已经有一段时间了。当我尝试在 Expo 上引用此 Snack 时，我意识到如果我在选项卡内导航，则无法通过按选项卡栏上的主页按钮导航回主页选项卡屏幕。我必须单击屏幕上的“返回”按钮才能导航回主页。

这是一段代码：

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 时，我无法导航回Settings。我必须点击屏幕顶部的后退按钮。

这里有什么问题？

Answer 1

为每条新路线使用唯一名称是个好主意。 React Navigation 使用这些名称作为唯一键来区分路线。我在您的默认TabNavigator 中看到了一个Settings，在您的SettingsStack StackNavigator 中也看到了另一个Settings。 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 },
});

现在，要从Settings 回到SettingsScreen > Details，你可能想试试

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

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

在他们的文档中某处。找到后我会尝试在此处添加链接以供参考。

Answer 2

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

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

Answer 3

createTopTabs = () => {
        return(
            <MaterialTopTabs.Navigator initialRouteName="Tab_Daily"
                tabBarOptions={{ 
                    showIcon: true, 
                    style: { backgroundColor: '#C4e672' },
                    labelStyle: { fontSize: 12, fontWeight: 'bold' },
                    /* tabStyle: { width: 100 }, */
                    tabStyle: { height: 50 },
                }}>
                <MaterialTopTabs.Screen 
                    name="Tab_ToDoNote"
                    component={TabToDoNote}
                    options={
                        {
                            title: '',
                            /* tabBarLabel: "Daily", */
                            tabBarIcon: () =>
                                (
                                    <Icons_SimpleLine
                                        style={
                                            [
                                                {
                                                    color: 'red',
                                                }
                                            ]
                                        }
                                        size={25}
                                        name={'note'}
                                    />
                                )
                        }
                    }
                />
                <MaterialTopTabs.Screen 
                    name="Tab_Daily"
                    component={TabDaily}
                    options={
                        {
                            title: '',
                            tabBarLabel: "Daily",
                            tabBarIcon: () =>
                                (
                                    <Icons_MaterialCommunity
                                        style={
                                            [
                                                {
                                                    color: 'red'
                                                }
                                            ]
                                        }
                                        size={18}
                                        name={'calendar-today'}
                                    />
                                )
                        }
                    }
                />
                <MaterialTopTabs.Screen 
                    name="Tab_Monthly"
                    component={TabMonthly}
                    options={
                        {
                            tabBarLabel: "Monthly",
                            tabBarIcon: () =>
                                (
                                    <Icons_MaterialCommunity
                                        style={
                                            [
                                                {
                                                    color: 'red'
                                                }
                                            ]
                                        }
                                        size={18}
                                        name={'calendar-month-outline'}
                                    />
                                )
                        }
                    }
                />
                <MaterialTopTabs.Screen 
                    name="Tab_Yearly"
                    component={TabYearly}
                    options={
                        {
                            tabBarLabel: "Yearly",
                            tabBarIcon: () =>
                                (
                                    <Icons_MaterialCommunity
                                        style={
                                            [
                                                {
                                                    color: 'red'
                                                }
                                            ]
                                        }
                                        size={18}
                                        name={'calendar-multiple'}
                                    />
                                )
                        }
                    }
                />
            </MaterialTopTabs.Navigator>
        );
    }