मुझे क्यों मिल रहा है "अपरिभाषित एक वस्तु नहीं है (PropTypes.shape का मूल्यांकन)"?

Question

जब भी मैं अपना iOS सिम्युलेटर चलाने की कोशिश करता हूं, तो मुझे वह त्रुटि मिल रही है। सभी मॉड्यूल स्थापित हैं, मेरी तस्वीर के लिए फ़ाइल पथ सही है, मेरे सिम्युलेटर में दिखाई देने वाले किसी भी को छोड़कर मेरे आईडीई में कोई त्रुटि नहीं डाली जा रही है। त्रुटि के नीचे चित्र।

यहाँ 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; 

यहाँ 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; 

यहाँ 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; 

यहाँ 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

ऐसा लगता है PropTypes अनिर्धारित रहता है। मुझे यह नहीं लगता कि यह आपके कोड में कहीं भी घोषित किया गया है। आप एक अलग मॉड्यूल के माध्यम से इसे आयात करने के लिए के रूप में दस्तावेजों में दिखाया गया है: PropTypes.

अद्यतन:

शायद एक पुस्तकालय का उपयोग कर रहे अब पदावनत/गैर-समर्थित React.PropTypes उपयोग कर रहा है। मैं एक और अधिक अद्यतित लाइब्रेरी का उपयोग करने की सलाह देता हूं या वास्तव में लाइब्रेरी में जा रहा हूं और पैकेज को अपडेट कर रहा हूं, इसलिए यह React.PropTypes के बजाय अलग-अलग पैकेज से नए PropTypes का उपयोग करता है। इससे आपकी समस्या ठीक होनी चाहिए

Answer 2

प्रतिक्रिया ने हाल ही में 15.5 के रूप में अपनी कोर लाइब्रेरी से प्रोप टाइप को हटा दिया।

लाइन

import PropTypes from 'prop-types'; 

जोड़े और वह से सीधे अपने proptypes कहते हैं।

Answer 3

हाँ निश्चित रूप से, अगर आप उन्नयन प्रतिक्रिया: 15 या अधिक है तो आप import PropTypes from 'prop-types';

जोड़ने के लिए लेकिन हाल ही में मैं "प्रतिक्रिया" में एक ही मुद्दा का सामना करना पड़ा: "16.0.0-beta.5" के बाद मैं

बदल

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

फिर यह ठीक काम कर पाया। आशा करता हूँ की ये काम करेगा!