Tại sao tôi nhận được "không xác định không phải là một đối tượng (đánh giá PropTypes.shape)"?

Question

Bất cứ khi nào tôi cố gắng chạy trình mô phỏng iOS của mình, tôi nhận được lỗi đó. Tất cả các mô-đun được cài đặt, đường dẫn tệp đến ảnh của tôi là chính xác, không có lỗi nào được ném trong IDE của tôi ngoại trừ một lỗi xuất hiện trong trình mô phỏng của tôi. Hình ảnh bên dưới lỗi.

Dưới đây là 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; 

Dưới đây là 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; 

Dưới đây là 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; 

Đây là 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

Có vẻ như PropTypes chưa được xác định. Tôi không thấy nó được khai báo ở bất cứ đâu trong mã của bạn. Bạn cần phải nhập nó thông qua một mô-đun riêng biệt như trong các tài liệu: PropTypes.

Cập nhật:

Có lẽ một thư viện bạn đang sử dụng đang sử dụng React.PropTypes không được hỗ trợ bây giờ bị phản /. Tôi khuyên bạn nên sử dụng một thư viện cập nhật hơn hoặc thực sự đi vào thư viện và cập nhật gói để nó sử dụng các PropTypes mới từ gói riêng biệt thay vì React.PropTypes. Điều này sẽ khắc phục sự cố của bạn

Answer 2

Phản hồi các PropTypes đã xóa gần đây khỏi thư viện cốt lõi của chúng như React 15.5.

Thêm dòng

import PropTypes from 'prop-types'; 

Và gọi proptypes của bạn trực tiếp từ đó.

Answer 3

Có chắc chắn, nếu bạn nâng cấp lên phản ứng: 15 hoặc cao hơn thì bạn cần phải thêm import PropTypes from 'prop-types';

Nhưng gần đây tôi phải đối mặt với cùng một vấn đề trong "phản ứng": "16.0.0-beta.5" sau khi tôi thay đổi

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

Sau đó, nó hoạt động tốt. Hy vọng nó giúp!