每当我试图导航到另一个页面时,React导航就会将我推到上一页

dnph8jn4  于 2022-12-24  发布在  React
关注(0)|答案(1)|浏览(128)

我发现使用react-native-navigation很难导航到另一个页面,我正在寻找的工作流程是A -〉B,然后当我按下B中的任何按钮时,应该转到A,每当我单击A中的按钮时,它会转到B,但没有单击任何按钮,它会再次将我重定向到A,底部选项卡导航器中也发生了同样的问题。
这是我的栈和底部标签导航器的代码,

function MyTabs() {
    const isDarkMode = useColorScheme() === 'dark';
    return (
        <Tab.Navigator
            screenOptions={({ route }) => ({
                headerShown: false,
                tabBarShowLabel: false,
                gestureEnabled: false,
                tabBarStyle: {
                    backgroundColor: isDarkMode ? Color.Black : Color.White,
                    borderTopWidth: 1,
                    borderColor: isDarkMode ? Color.White : Color.White,
                    height: 80,
                },
                tabBarIcon: ({ focused }) => (
                    <View>
                        {route.name === 'Profile' ? (
                            <MaterialIcons
                                name="person"
                                size={30}
                                color={isDarkMode ? (focused ? Color.White : Color.DarkGrey) : (focused ? Color.Black : Color.LightGrey)}
                                style={{
                                    textAlign: 'center',
                                    marginTop: 10
                                }}
                            />
                        ) : (
                            <Image
                                source={Images.Explore}
                                resizeMode="contain"
                                style={{
                                    width: 30,
                                    height: 30,
                                    tintColor: isDarkMode ? (focused ? Color.White : Color.DarkGrey) : (focused ? Color.Black : Color.LightGrey),
                                    marginTop: 8
                                }}
                            />
                        )}
                    </View>
                ),
                tabBarLabelStyle: {
                    fontSize: 15,
                }
            })}
        >
            <Tab.Screen name="Explore" component={Explore} />
            <Tab.Screen name="Profile" component={Profile} />
        </Tab.Navigator>
    );
}

const Stack = createNativeStackNavigator();

export default function App() {
    return (
        <NavigationContainer>
            <Stack.Navigator
                initialRouteName="Splash"
                screenOptions={{
                    headerShown: false,

                }}
            >
                <Stack.Screen name="Splash" component={Splash} options={{ headerShown: false }} />
                <Stack.Screen name="Login" component={Login} options={{ headerShown: false }} />
                <Stack.Screen name="Register" component={Register} options={{ headerShown: false }} />
                <Stack.Screen name="BottomTabs" component={MyTabs} options={{ headerShown: false, gestureEnabled: false, }} />
            </Stack.Navigator>
        </NavigationContainer>
    );
}

相关问题