react-native - 使用 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>
    );
};

标签： react-nativereact-navigation

Answer 1

从components作为 props 传入的<Stack.Screen>你可以很容易地访问navigationprops。该值与您从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.
  }
}

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