Dlaczego otrzymuję komunikat "undefined nie jest obiektem (ocena PropTypes.shape)"?

Question

Ilekroć próbuję uruchomić mój symulator iOS, otrzymuję ten błąd. Wszystkie moduły są zainstalowane, ścieżka do pliku jest poprawna, brak błędów zgłaszanych w moim IDE, z wyjątkiem tego, który pojawia się w moim symulatorze. Zdjęcie poniżej błędu.

Oto 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; 

Oto 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; 

Oto 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; 

Oto 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

Wydaje PropTypes jest niezdefiniowany. Nie widzę go zadeklarowanego nigdzie w twoim kodzie. Trzeba importować je poprzez oddzielny moduł, jak pokazano w dokumentach: PropTypes.

Aktualizacja:

Może biblioteka używasz korzysta obecnie nieaktualnych/nieobsługiwanych React.PropTypes. Zalecam używanie bardziej aktualnej biblioteki lub przechodzenie do biblioteki i aktualizowanie pakietu, aby używał nowych PropTypes z oddzielnego pakietu zamiast React.PropTypes. To powinno naprawić Twój problem.

Answer 2

React niedawno usunięto PropTypes z ich biblioteki głównej z React 15.5.

Dodaj linię

import PropTypes from 'prop-types'; 

i skontaktować się bezpośrednio z proptypes że.

Answer 3

Tak zdecydowanie, jeśli uaktualnienie reagują: 15 lub wyższy potem trzeba dodać import PropTypes from 'prop-types';

Ale ostatnio w obliczu tego samego problemu w „reagują”: „16.0.0-beta.5” po zmianie

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

Następnie stwierdzono, działa bez zarzutu. Mam nadzieję, że to pomoże!