Question

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

2020-05-07

305

react-native react-navigation

我正在使用此链接中提到的方法路由到另一个屏幕。问题是他们在功能组件中使用钩子。而我正在使用类组件。

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

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

我的路线如下：

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

从作为 props 传递到 <Stack.Screen> 的 components ，您可以轻松访问 navigation prop。此值与您从 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.
  }
}

如果您想从嵌套组件（即子组件的子组件）访问导航，则必须将其作为 prop 传递到层次结构中。