Как я могу вызвать StackNavigator из компонента класса в React Native?

Question

Я пытаюсь создать страницу Hello World со ссылкой на страницу с подробностями. Я понимаю, как перемещаться, используя функциональные компоненты, используя StackNavigator. Но я не совсем понимаю, как это работает с компонентом класса. Я использую реагирующую навигацию 5.x и React Native 0.61 Как перевести это в синтаксис компонента, основанного на классе (как следует из большинства руководств, а не нового функционального компонента).

Когда мы используем функциональные компоненты - с React Родной 0,61 - метод состоит в том, чтобы сделать это:

function WelcomePage({ navigation }) {
      return (
        <View style={styles.container}>
          <Text style={styles.heading} >Welcome!</Text>
        </View>
      )
}

Но когда я пытаюсь сделать это в классе - как мне заставить его вызывать или наследовать от навигации?

export default class HelloWorld extends Component<Props> {

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
        <TouchableOpacity onPress={() => navigation.navigate('Details') }><Text>Go to Details</Text></TouchableOpacity>
      </View>
    );
  }
}

Это дает мне эту ошибку (см. снимок экрана ). Я должен связывать «это» или что-то, всякий раз, когда я пытаюсь это. Что-то снова выдает подобные ошибки. Связано ли это с новой версией 0.61 React native и отсутствием обратной совместимости - или что это такое?

Answer 1

Навигация происходит от реквизита

 //                       props
 function WelcomePage({ navigation }) { ... }

Чтобы получить доступ к реквизиту в компоненте класса, вы делаете this.props.navigation.

В вашем примере это будет

export default class HelloWorld extends Component<Props> {

  render() {
    return (
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
        <Text>Hello, world!</Text>
        {/*                                 getting navigation from props*/}
        <TouchableOpacity onPress={() => this.props.navigation.navigate('Details') }><Text>Go to Details</Text></TouchableOpacity>
      </View>
    );
  }
}

Пожалуйста, прочитайте документы о реквизите.