反应本机StackActions.popToTop在createBottomTabNavigator侦听器中无法正常工作

Question

我的应用程序有几个使用createBottomTabNavigator创建的选项卡，每个选项卡都包含一些屏幕。我正在尝试实现以下目标：当用户单击选项卡时，我希望我的应用呈现该选项卡的第一个/主屏幕。

因此，我在互联网上找到了以下行navigation.dispatch（StackActions.popToTop（）），该行应该将所有屏幕/路由重置为初始屏幕。如果要弹出某些屏幕（例如，如果用户单击某些屏幕），则下面的代码可以正常工作。如果您在第一个屏幕上并单击此选项卡，则会出现以下错误。

无法通过try / catch处理错误。如何避免触发此错误？我可以以某种方式检查是否有一些屏幕可以返回吗？它说它可以在生产中使用，但是当用expo进行测试时，错误是一场噩梦，无法解决...

const Tab = createBottomTabNavigator();
const MyTabs = () => {
    return (
        <Tab.Navigator
            initialRouteName="FirstTab"
        >
            <Tab.Screen
                name="FirstTab"
                component={FirstTabScreen} // This is my createStackNavigator()
                options={{
                    tabBarLabel: "Scan",
                    tabBarIcon: () => <Icon name="camera" />,
                }}
                listeners={({ navigation, route }) => ({
                    tabPress: (e) => {
                        e.preventDefault();
                        navigation.dispatch(StackActions.popToTop());
                        navigation.navigate("FirstTab");
                    },
                })}
            />
        </Tab.Navigator>
    );
};

return (
    <NavigationContainer>
        <MyTabs />
    </NavigationContainer>
);

Answer 1

有一个display:flex; flex-direction:column; min-height:100vh;可用于实现此目的。如果不起作用，则可以尝试this solution from another stackoverflow thread。