Перейдите на другой экран с помощью реакции-навигации

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 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.
  }
}

Если вам нужен доступ к навигации из вложенного компонента (ie - дочерний элемент дочернего элемента), вам придется передать это как опору в иерархии.