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

Question

我使用反应导航已经有一段时间了。当我尝试在 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 使用这些名称作为唯一键来区分路线。我在您的默认

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

>

Settings

返回

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

Answer 4

您可能需要将

unmountOnBlur: true

添加到您想要清除的选项卡