使用 react-navigation 导航到另一个屏幕

Question

我是用这个上面提到的方法路由到另一个屏幕的。联系. 问题是他们在一个功能组件里面使用钩子。而我使用的是一个类组件，我的问题是，如何在一个类组件的子组件中使用这种导航从一个屏幕导航到另一个屏幕？

我的问题是，我怎样才能在类组件的子组件中使用这个导航从一个屏幕导航到另一个屏幕。

因为类组件不允许我在它里面使用钩子。

我的路由如下。

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 传来 <Stack.Screen> 您可以轻松访问 navigation 道具。这个值与你从 useNavigation 钩子.如果你想从一个嵌套的组件(即子组件的子组件)中访问导航，你必须把它作为一个道具向下传递。

class DashboardScreen extends React.Component {
  render() {
    const navigation = props.navigation; // this should be populated
    // you can use this in a component to navigate from there.
  }
}

如果你想从一个嵌套的组件（即子组件的子组件）中访问导航，你将不得不把它作为一个道具向下传递。