Как я могу получить доступ к текущей навигации внутри React.Component с помощью responsenavigation 5?

Question

Я сейчас использую реагирующую навигацию версии 5 после учебного руководства для перехода к другому экрану в стеке (встроен в Навигатор вкладок).

В учебном пособии они всегда использовали функцию для инициализации специальный экран c, поэтому параметр навигации будет легко вызываться внутри тела функции. Например:

function HomeScreen({ navigation })

// Вызывается

        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />

Но если вместо этого я создаю React.Component, как я могу получить доступ к навигации внутри этого Компонента для перейти к другому компоненту? plz

Пожалуйста, запустите приведенные ниже коды на выставке, если мои объяснения плохие. Спасибо,

import * as React from 'react';
import { Button, Text, View, Alert } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';


class Options extends React.Component {

  navigaeToAnotherScreen() {
    console.log('How can I access current navigation plz?');
  }

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world! Option</Text>
        <Button title="Go To Main" onPress={() => this.navigaeToAnotherScreen() }/>
      </View>
    );
  }
}

function OptionsScreen({ navigation }) {
  return (
    <Options/>
  );
}

function DetailsScreen({ navigation }) {

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Details!</Text>
      <Button title="Detail" onPress={ () => navigation.push('Options')}/>
    </View>
  );
}

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function SettingsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.push('Details')}
      />
    </View>
  );
}

const HomeStack = createStackNavigator();

function HomeStackScreen() {
  return (
    <HomeStack.Navigator>
      <HomeStack.Screen name="Home" component={HomeScreen} />
      <HomeStack.Screen name="Details" component={DetailsScreen} />
      <HomeStack.Screen name="Options" component={OptionsScreen} />
    </HomeStack.Navigator>
  );
}

const SettingsStack = createStackNavigator();

function SettingsStackScreen() {
  return (
    <SettingsStack.Navigator>
      <SettingsStack.Screen name="Settings" component={SettingsScreen} />
      <SettingsStack.Screen name="Details" component={DetailsScreen} />
    </SettingsStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={HomeStackScreen} />
        <Tab.Screen name="Settings" component={SettingsStackScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Answer 1

попробуйте это, я заметил, что вы не передали существующие реквизиты в Options

function OptionsScreen({ navigation }) {
  return (
    <Options navigation={navigation} />
  );

, затем попробуйте это

 navigaeToAnotherScreen() {
    this.props.navigation.navigate("AnyScreen");
  }