无法在React native中的自定义后退按钮上运行react-navigation功能

Question

我无法运行的功能是示例中的导航功能，它是>>

this.this.props.navigation.goBack()
我的登录文件发布在下面，但是有问题的部分是简短的片段

我得到的错误是：TypeError：未定义不是对象（正在评估'LogIn.props.navigation']

第一个失败的代码段

static navigationOptions = {
        headerLeft: () => (
          <Button
            onPress={()=>this.props.navigation.goBack()}
            title="cancel"
            color={colors.black}
          />
        ),
    };
LogIn.js

import React, { Component } from 'react';
import { PropTypes } from 'prop-types';
import Icon from 'react-native-vector-icons/FontAwesome';
import colors from '../styles/colors';
import {
  View,
  Text,
  ScrollView,
  StyleSheet, 
  KeyboardAvoidingView,
  Button
} from 'react-native';

import InputField from '../components/form/InputField';
import NexArrowButton from '../components/buttons/NextArrowButton';
import Notification from '../components/Notification';


export default class LogIn extends Component{

    constructor(props){
        super(props);
        this.state ={
            formValid:false,
            validEmail:false,
            emailAddress:'',
            validPassword:false,
        }

        this.handleNextButton = this.handleNextButton.bind(this)
        this.handleCloseNotification = this.handleCloseNotification.bind(this)
        this.handleEmailChange = this.handleEmailChange.bind(this);
    }

    static navigationOptions = {
        headerLeft: () => (
          <Button
            onPress={()=>this.props.navigation.goBack()}
            title="cancel"
            color={colors.black}
          />
        ),
    };

    handleNextButton(){
        if(this.state.emailAddress === '[email protected]'){
            this.setState({formValid:true})
        } else{
            this.setState({formValid: false});
        }
    }

    handleCloseNotification(){
        this.setState({formValid:true });
    }

    handleEmailChange(email){
        const emailCheckRegex = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        const { validEmail } = this.state;
        this.setState({ emailAddress: email });

        if (!validEmail) {
          if (emailCheckRegex.test(email)) {
            this.setState({ validEmail: true });
          }
        } else if (!emailCheckRegex.test(email)) {
          this.setState({ validEmail: false });
        }
    }

    handlePasswordChange(password){
        const { validPassword } = this.state;

        this.setState({ password });

        if (!validPassword) {
          if (password.length > 4) {
            // Password has to be at least 4 characters long
            this.setState({ validPassword: true });
          }
        } else if (password <= 4) {
          this.setState({ validPassword: false });
        }
    }



    render(){

        const {formValid, validPassword} = this.state;
        const showNotification = formValid ? false:true; 
        const background = formValid ? colors.green01 : colors.darkOrange;
        const notificationMarginTop =  showNotification ? 10:0;
        return(
            <KeyboardAvoidingView style={[{backgroundColor:background}, styles.wrapper] } behavior="padding">
                <View style={styles.ScrollViewWrapper}>
                    <ScrollView style={styles.ScrollView}>
                        <Text style={styles.loginHeader}>Log In</Text>
                        <InputField
                            labelText= "Email Address"
                            labelTextSize={20}
                            labelColor={colors.white}
                            textColor={colors.white}
                            borderBottomColor={colors.white}
                            inputType="email"
                            customStyle={{marginBottom:30}}
                            onChangeText={this.handleEmailChange}
                        />

                        <InputField
                            labelText= "Password"
                            labelTextSize={20}
                            labelColor={colors.white}
                            textColor={colors.white}
                            borderBottomColor={colors.white}
                            inputType="password"
                            customStyle={{marginBottom:30}}
                        />
                    </ScrollView>

                    <View style={styles.nextButton}>
                        <NexArrowButton
                            // handleNextButton={this.handleNextButton}
                            handleNextButton={()=>this.props.navigation.goBack()}

                        />
                    </View>

                    <View style={[styles.notificationWrapper, {marginTop:notificationMarginTop}]}>
                        <Notification
                            showNotification={showNotification}
                            handleCloseNotification={this.handleCloseNotification}
                            type="Error"
                            firstLine="Those credentials don't look right."
                            secondLine="Please try again."                            
                            /> 
                    </View>
                </View>
            </KeyboardAvoidingView>
        )
    }
}

const styles = StyleSheet.create({
    wrapper:{
        display:'flex',
        flex:1,
    },

    ScrollViewWrapper:{
        marginTop:60,
        flex:1,
    },

    ScrollView:{
        paddingLeft:30,
        paddingRight:30,
        paddingTop:10,
        flex:1,
    },

    loginHeader:{
        fontSize:34,
        color:colors.white,
        fontWeight:'300',
        marginBottom:40,
    },

    nextButton:{
        position:'absolute',
        right:20,
        bottom:20,
    },

    notificationWrapper:{
        position: 'absolute',
        bottom:0,
        zIndex:9
    }


});
最令人困惑的部分是，Login.js下面的第二个片段完美运行，并且本质上是相同的，这意味着我正确安装了道具，但是在自定义的后退按钮中仍然出现错误。

第二个工作片段

<View style={styles.nextButton}>
   <NexArrowButton
      // handleNextButton={this.handleNextButton}
      handleNextButton={()=>this.props.navigation.goBack()}
    />
</View>
App.js

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View } from 'react-native';
import LoggedOut from './src/screens/LoggedOut';
import LogIn from './src/screens/LogIn';
import LoggedIn from './src/screens/LoggedIn';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';


const RootStack = createStackNavigator(
  {
    LoggedOut: LoggedOut,
    LogIn: LogIn,
  },
  {
    initialRouteName: 'LoggedOut',
  }

);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}
更详细的错误

非常感谢您的帮助！如果很容易调试，我很乐意提供更多代码。

我无法运行的功能是我的示例中的导航功能，它是this.this.props.navigation.goBack（）我的登录文件发布在下面，但有问题的部分是短片段...

Answer 1

如果要访问静态功能中的导航属性，则必须将静态NavigationOptions更改为以下代码段：