this.props в компоненте не содержит свойства навигации

Question

Я хочу перейти с одного экрана на другой с помощью this.props.navigation.navigate('Second Screen'), но свойство 'навигация' не содержится в подпорках.Получить ошибку: свойство 'navigation' не существует для типа 'Readonly <{}> & Readonly <{children ?: ReactNode;}> '

import React, { Component } from "react";

import styles from "./style";
import { Keyboard, Text, View, TextInput, TouchableWithoutFeedback, KeyboardAvoidingView } from 'react-native';
import { Button } from 'react-native-elements';

export default class SignInScreen extends Component {

  render() {
    return (
      <KeyboardAvoidingView style={styles.containerView} behavior="padding">


        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
          <View style={styles.loginScreenContainer}>
            <View style={styles.loginFormView}>
              <Text style={styles.logoText}>Book Market</Text>
              <TextInput placeholder="Email" placeholderTextColor="#c4c3cb" style={styles.loginFormTextInput} />
              <TextInput placeholder="Password" placeholderTextColor="#c4c3cb" style={styles.loginFormTextInput} secureTextEntry={true} />
              <Button
                buttonStyle={styles.loginButton}
                onPress={this.props.navigation.navigate('Home')}
                title="Login"
              />
            </View>
          </View>
        </TouchableWithoutFeedback>
      </KeyboardAvoidingView>
    );
  }
}

Answer 1

Вы можете сделать то, что уже было предложено, передать навигационную опору вашему целевому компоненту

Пример:

<TargetComponent navigation={this.props.navigation} />

Или вы можете использовать withNavigation HOC от реагирования-натирации.

Пример:

import {withNavigation} from 'react-navigation'

...

export default withNavigation(Child)

Надеюсь, это поможет.

Answer 2

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

Например:

<Child navigation={this.props.navigation} />

Answer 3

Хорошо, я нашел решение. Сначала мне нужно изменить экстенты моего класса, например

export default class SignInScreen extends Component<{navigation: any}>

Затем измените действие onPress:

<Button
  buttonStyle={styles.loginButton}
  onPress={() => this.onSignInPress()}
  title="Login"
/>

private onSignInPress() {
    this.props.navigation.navigate('Home');
  }