javascript - 类型错误 : Undefined is not an object (evaluating this. props.navigation.navigate)

Question

因此，我正在创建一个支持登录 Oauth 的新登录屏幕。我从之前制作的通用登录屏幕中添加了一些代码，但我的导航 Prop 收到了类型错误。有人可以解释为什么会发生这种情况以及如何解决它吗？由于此错误，我的应用程序甚至无法加载，即使 APp.js 中显示错误:56。在我的应用程序文件中，我使用 jsx 来调用登录屏幕。

LoginScreen.js

import React from 'react';
import {
    View,
    Image,
    Text,
    Dimensions,
    StyleSheet,
    TouchableOpacity,
    Alert,
    Animated,
    Easing,
    TextInput } from 'react-native';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import { FontAwesome as Icon } from '@expo/vector-icons';
import FBSDK, { LoginManager } from 'react-native-fbsdk';
import { ifIphoneX } from 'react-native-iphone-x-helper';
import firebase from 'firebase';
import { AppAuth } from 'expo';
import Footer from '../Components/Footer';
import * as userActions from '../reducers/user/Actions';
import {
    EMAIL_REGIX, //What is this EMAIL_REGIX?
    EMAIL_ALERT,
    PASSWORD_ALERT,
    PASSWORD_MESSAGE,
    FB_ALERT,
    ACCOUNT,
    FORGOT,
    SIGNUP
} from '../utils/constants';

const { width, height } = Dimensions.get('window');

class LoginScreen extends React.Component {

  onSubmit = () => {
      const {
          navigation: { navigate }
      } = this.props;
      if (!EMAIL_REGIX.test(this.state.email)) {
          Alert.alert('Alert', EMAIL_ALERT);
      } else if (this.state.password.length < 6) {
          Alert.alert('Alert', PASSWORD_ALERT);
      } else if (this.state.password.length > 15) {
          Alert.alert('Alert', PASSWORD_MESSAGE);
      } else {
          navigate(ACCOUNT);
      }
  };

checkIfUserIsLoggedIn = () => {
      firebase.auth().onAuthStateChanged(user => {
          if (user) {
              this.props.navigation.navigate('Account');
          } else {
              this.props.navigation.navigate('LoginScreen');
          }
      });
  };

render() {
  const {
      navigation: { navigate }
  } = this.props;
  return (
      <View style={styles.container}>
        <View style={{ ...StyleSheet.absoluteFill }}>
        <Image
          source={require('../assets/Images/TemplatePic.jpg')}
          style={{ flex: 1, height: null, width: null }}
          resizeMode="cover"
        />
        </View>
        <View style={{ height: height / 3, backgroundColor: 'white' }} />
        <TouchableOpacity onPress={this.onSubmit}>
          <View
            style={[
              styles.loginbutton,
              commonStyles.alignSelfcenter,

              {
                width: width * 0.73
              }
            ]}
          >
            <Text style={[styles.logintextbutton]}>Sign In</Text>
          </View>
        </TouchableOpacity>
      </View>

  );
}
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flex: 1,
    backgroundColor: 'red',
    justifyContent: 'flex-end'
  },
  loginbutton: {
    width: 320,
    backgroundColor: 'rgb(72, 244, 255)',
    borderRadius: 20,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.5,
    shadowRadius: 5,
    elevation: 20
  },
  logintextbutton: {
    fontSize: 16,
    textAlign: 'center',
    justifyContent: 'center',
    color: 'white',
    fontFamily: 'Helvetica-Bold'
  },
});

export default LoginScreen;

App.js

import React from 'react';
import { View, Image, Dimensions, SafeAreaView, StyleSheet, Text } from 'react-native';
import { Provider, connect } from 'react-redux';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as firebase from 'firebase';
import { firebaseConfig } from './config.js';
import RootStack from './RootStack';
import LoginScreen from './App/screens/LoginScreen';
import configureStore from './App/reducers/configureStore';

firebase.initializeApp(firebaseConfig);
// create store from redux
const store = configureStore();

function cacheImages(images) {
  return images.map(image => {
    if (typeof image === 'string') {
      return Image.prefetch(image);
    }
      return Asset.fromModule(image).downloadAsync();
  });
}

export default class App extends React.Component {
    // Render the app container component with the provider around it
      constructor(props) {
        super(props);
        this.state = {
          isReady: false
        };
      }

      async _loadAssetsAsync() {
        const imageAssets = cacheImages([
          require('./assets/images/TemplatePic.jpg'),
        ]);

        await Promise.all([...imageAssets]);
      }

    render() {
      //If the state is not ready then display the apploading oterwise display the app
      if (!this.state.isReady) {
          return (
            <AppLoading
              startAsync={this._loadAssetsAsync}
              onFinish={() => this.setState({ isReady: true })}
              onError={console.warn}
            />
          );
        }
      return (
        <View style={styles.background}>
          <Provider store={store}>
            <LoginScreen navigation={this.props.navigation} />
          </Provider>
        </View>
      );
    }
    }

    const styles = StyleSheet.create({
      background: {
        flex: 1,
        backgroundColor: '#FFFFFF',
        justifyContent: 'center',
        alignItems: 'center',
        fontSize: 16
      },
      textStyle: {
      }
    });

Answer 1

在你的 App.js 中

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

在您的 loginScreen.js 中 <TouchableOpacity onPress={ () =>this.onSubmit()}>

另外，

checkIfUserIsLoggedIn = () => {
const that = this;
      firebase.auth().onAuthStateChanged(user => {

          if (user) {
              that.props.navigation.navigate('Account');
          } else {
              that.props.navigation.navigate('LoginScreen');
          }
      });
  };

这将解决问题:)

您需要将导航传递给子组件以使其可访问。