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

时间:2019-07-04 14:34:39

标签: reactjs react-native react-navigation

我想通过this.props.navigation.navigate('Second Screen')从一个屏幕导航到另一个屏幕,但道具中不包含属性“ navigation”。得到错误: 属性'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>
    );
  }
}

4 个答案:

答案 0 :(得分:1)

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

例如:

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

答案 1 :(得分:1)

您可以执行建议的操作,将导航道具向下传递到目标组件

例如:

[302, OI]
[303, N2]
[304, N2.5]

或者您可以通过反义词使用<TargetComponent navigation={this.props.navigation} /> HOC。

例如:

withNavigation

希望有帮助。

答案 2 :(得分:0)

好的,我找到了解决方案。首先,我需要更改班级的扩展,例如

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

答案 3 :(得分:0)

我知道这是一个古老的问题,但是由于至少对于那些使用EXPO托管方法的人来说,未定义 navigation 属性的问题仍然存在,因此我希望写出自己的解决方案以节省某人的一天。

搜索了几个小时后,我找不到解决此错误的方法,没有找到向 this.props 添加 navigation 属性的方法。最后,我通过使用 NavigationContext 这样的方式解决了这个问题:

<NavigationContainer>
    <NavigationContext.Provider>
        <Stack.Navigator>
            ...
        </Stack.Navigator>
    </NavigationContext.Provider>
</NavigationContainer>

然后在消费者中获得导航:

<NavigationContext.Consumer>
    {navigation => {
        return (
            <Button onPress={() => this.onButtonPress(navigation)} />
        );
    }}
</NavigationContext.Consumer>

最后:

onButtonPress(navigation) {
    try {

        navigation.navigate(RouteNames.FORGOTTEN_PASSWORD_SCREEN);

    } catch (e) {
        this.setState({ errors: [e.message] });
    }
}