Question

我正在使用此link中提到的方法路由到另一个屏幕。问题在于他们在功能组件内部使用了钩子。我正在使用一个类组件。

我的问题是，如何使用此导航在作为类组件的子组件内从一个屏幕导航到另一个屏幕。

因为类组件不允许我在其中使用钩子。

我的路线如下：

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

const HomeScreenRoutes = () => {
    return (
        <Tab.Navigator>
            <Tab.Screen
                name="Dashboard"
                component={DashboardScreen}/>
            <Tab.Screen
                name="Transactions"
                component={TransactionsScreen}/>
            <Tab.Screen
                name="Reports"
                component={ReportsScreen}/>
            <Tab.Screen
                name="About Me"
                component={UserInfoScreen}/>
        </Tab.Navigator>

    );
};

const Routes = () => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen
                    name="LoginSignup"
                    component={AuthenticationScreen}
                    options={
                        {title: 'Login or Signup', headerShown: false}
                    }/>
                <Stack.Screen
                    name="HomeScreen"
                    component={HomeScreenRoutes}
                    />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

Answer 1

从作为道具传递到components的{{1}}可以轻松访问<Stack.Screen>道具。此值与您从navigation挂钩获得的值相同。

useNavigation

如果您想从嵌套组件（即孩子的孩子）访问导航，则必须将其作为道具传递到直升机上。

使用反应导航导航到另一个屏幕

1 个答案: