NodeJS 在react-native中从一个导航容器到另一个导航容器的导航

bbuxkriu  于 2023-06-29  发布在  Node.js
关注(0)|答案(2)|浏览(147)
import React, { useState } from 'react';     
import { createNativeStackNavigator } from '@react-navigation/native-stack';    
import { NavigationContainer } from '@react-navigation/native';     
. . . .

所有的屏幕都是进口的
退出配置文件屏幕,然后导航到登录屏幕。
我的导航文件是

const BottomTab = createBottomTabNavigator();
const Stack = createNativeStackNavigator()
export default Navigate = () => {

    function Editable() {
        return (
            <NavigationContainer independent={true}>
                <Stack.Navigator screenOptions={{ headerShown: false }} >
                    <Stack.Screen name="ProfileScreen" component={ProfileScreen} />
                    <Stack.Screen name='Edit_profile' component={Edit_profile} />
                    <Stack.Screen name='MyComplaints' component={MyComplaints} />
                </Stack.Navigator>
            </NavigationContainer>
        )
    }

    function HomeScreen() {
        return (
            <NavigationContainer independent={true}>
                <BottomTab.Navigator tabBarOptions={{ keyboardHidesTabBar: true }}>
                    <BottomTab.Screen name="Home" component={Home}/>
                    <BottomTab.Screen name="Home2" component={Home2} />
                    <BottomTab.Screen name="Editable" component={Editable}/>
                    <BottomTab.Screen name="Feedback" component={Feedback}/>
                </BottomTab.Navigator>
            </NavigationContainer>
        )
    };

    return (
        <NavigationContainer independent={true}>
            <Stack.Navigator screenOptions={{ headerShown: false }} 
                <Stack.Screen name="Login" component={Login} />
                <Stack.Screen name="App" component={App} />
                <Stack.Screen name="HomeScreen" component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    )
};

我想从配置文件屏幕导航到登录屏幕,该如何操作?

nqwrtyyt

nqwrtyyt1#

在多个导航容器之间导航是不可能的,因为它们彼此独立。您需要删除嵌套的NavigationContainer组件。
在应用的根目录下应该只有一个NavigationContainer
https://reactnavigation.org/docs/getting-started/#wrapping-your-app-in-navigationcontainer

qlzsbp2j

qlzsbp2j2#

您可以为每个NavigationContainer创建每个navigationRef。然后使用这个ref来导航,而不使用导航 prop 或钩子。

// More info: https://reactnavigation.org/docs/navigating-without-navigation-prop/

export const navigationRef = createNavigationContainerRef()

export function navigate(name: any, params?: any) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name as never, params as never)
  }
}
...
 <NavigationContainer ref={navigationRef} {...props}>
...

相关问题