reactjs - 组件中的 this.props 不包含导航属性

Question

我想从一个屏幕导航到另一个屏幕，this.props.navigation.navigate('Second Screen')但属性“导航”不包含在道具中。获取错误：类型 'Readonly<{}> 和 Readonly<{ children?: ReactNode; 上不存在属性'navigation' }>'

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>
    );
  }
}

标签： reactjsreact-nativereact-navigation

Answer 1

您只能通过父元素访问它。将导航作为道具传递给其子级以使用它

例如：

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