Warum bekomme ich "undefined ist kein Objekt (Bewertung von PropTypes.shape)"?

Question

Immer wenn ich versuche, meinen iOS Simulator zu laufen, bekomme ich diesen Fehler. Alle Module sind installiert, der Dateipfad zu meinem Bild ist korrekt, es werden keine Fehler in meiner IDE angezeigt, außer für die, die in meinem Simulator erscheint. Bild unten des Fehlers.

Hier Login.js:

import React, {Component} from 'react'; 
import {StyleSheet, TextInput, Text, TouchableOpacity, KeyboardAvoidingView} from 'react-native'; 

class Login extends Component { 
    onButtonPress() { 
     this.props.navigator.push({ 
      id: 'CreateAccount' 
     }); 
    } 

    render() { 
     return(
      <KeyboardAvoidingView behavior={"padding"} style={styles.container}> 
        <TextInput 
         style={styles.input} 
         returnKeyType={"next"} 
         keyboardType={"email-address"} 
         autoCorrect={false} 
         placeholder={"Email"} 
        /> 

        <TextInput 
         style={styles.input} 
         returnKeyType={"go"} 
         placeholder={"Password"} 
         secureTextEntry 
        /> 

        <TouchableOpacity> 
         <Text style={styles.loginAndCA}>Login</Text> 
        </TouchableOpacity> 

        <TouchableOpacity onPress={this.onButtonPress.bind(this)}> 
         <Text style={styles.loginAndCA}>Create Account</Text> 
        </TouchableOpacity> 
      </KeyboardAvoidingView> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     padding: 20 // Length of text input boxes. 
    }, 

    input: { 
     backgroundColor: '#DAE5FF', 
     padding: 20, 
     paddingHorizontal: 15, 
     marginBottom: 10, 
     borderRadius: 15 
    }, 

    loginAndCA: { 
     fontSize: 40, 
     textAlign: 'center', 
     color: 'white', 
     fontFamily: 'Bodoni 72 Smallcaps', 
     paddingHorizontal: 10 
    } 
}); 

export default Login; 

hier BackGround.js:

import React, {Component} from 'react'; 
import {StyleSheet, Image, View, Text} from 'react-native'; 
import Login from './Login'; 

class BackGround extends Component { 
    render() { 
     return(
      <View style={styles.first}> 
       <Image style={styles.container} source={require('../pictures/smoke.jpg')}> 
        <View style={styles.second}> 
         <View> 
          <Text style={styles.title}>My App</Text> 
         </View> 
         <Login/> 
        </View> 
       </Image> 
      </View> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
     flex: 1, 
     alignItems: 'center', 
     width: null, 
     height: null, 
     backgroundColor: 'rgba(0,0,0,0)' 
    }, 

    first: { 
     flex: 1 
    }, 

    second: { 
     paddingTop: 290 // Moves both <TextInput> boxes down. 
    }, 

    title: { 
     fontSize: 34, 
     textAlign: 'center', 
     justifyContent: 'center', 
     flexDirection: 'row', 
     fontFamily: 'Bodoni 72' 
    } 

    // movementTitle: { 
    //  paddingBottom: 34 
    // } 
}); 

export default BackGround; 

hier CreateAccount.js:

import React, {Component} from 'react'; 
import {Text} from 'react-native'; 

class CreateAccount extends Component { 
    render() { 
     return(
      <Text>Must get to this page</Text> 
     ); 
    } 
} 

export default CreateAccount; 

Hier index.ios.js:

import React, {Component} from 'react'; 
import {View, StyleSheet, AppRegistry} from 'react-native'; 
import {Navigator} from 'react-native-deprecated-custom-components'; 
import BackGround from './components/BackGround'; 
import Login from "./components/Login"; 
import CreateAccount from "./components/CreateAccount"; 

export default class App extends Component { 
    render() { 
     return(
      <View style={styles.back}> 
       <BackGround/> 
       <Navigator 
        initialRoute={{id: 'Login'}} 
        renderScene={this.navigatorRenderScene} 
       /> 
      </View> 
     ); 
    } 

    navigatorRenderScene() { 
     _navigator = navigator; 
     switch(route.id) { 
      case 'Login': 
       return (<Login navigator={navigator} title="Login"/>); 
      case 'CreateAccount': 
       return (<CreateAccount navigator={navigator} title="Create Account" />); 
     } 
    } 
} 

const styles = StyleSheet.create({ 
    back: { 
     flex: 1 
    } 
}); 

AppRegistry.registerComponent('dendroApp',() => dendroApp); 

Answer 1

Es scheint PropTypes nicht definiert ist. Ich sehe es nirgendwo in deinem Code. Sie müssen es über ein separates Modul importieren, wie in den Dokumenten gezeigt: PropTypes.

Update:

Vielleicht eine Bibliothek Sie jetzt veraltet/nicht unterstützt React.PropTypes verwenden verwendet. Ich empfehle, eine aktuellere Bibliothek zu verwenden oder in die Bibliothek zu gehen und das Paket so zu aktualisieren, dass es die neuen PropTypes aus dem separaten Paket anstelle von React.PropTypes verwendet. Dies sollte Ihr Problem beheben

Answer 2

React kürzlich entfernt PropTypes aus ihrer Core-Bibliothek ab React 15.5.

die Zeile hinzufügen

import PropTypes from 'prop-types'; 

Und Ihre proptypes aus, dass direkt aufrufen.

Answer 3

Ja auf jeden Fall, wenn Sie ein Upgrade reagieren: 15 oder höher dann Sie import PropTypes from 'prop-types';

Aber vor kurzem stehe ich das gleiche Problem in „reagieren“ hinzufügen: „16.0.0-beta.5“, nachdem es

geändert

"dependencies": { 
     "react": "16.0.0-alpha.12" 
    }, 
    "devDependencies": { 
     "react-test-renderer": "16.0.0-alpha.12" 
    } 

Dann fand es funktioniert gut. Ich hoffe es hilft!