为什么我得到“未定义不是对象（评估 PropTypes.shape）”？答案

【问题标题】：Why am I getting "undefined is not an object (evaluating PropTypes.shape)"?为什么我得到“未定义不是对象（评估 PropTypes.shape）”？
【发布时间】：2017-07-04 16:34:54
【问题描述】：

每当我尝试运行我的iOS 模拟器时，我都会收到该错误。所有模块都已安装，我的图片的文件路径是正确的，除了出现在我的模拟器中的错误之外，我的 IDE 中没有抛出任何错误。错误如下图。

这里是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);

【问题讨论】：

标签： javascript ios reactjs react-native webstorm

【解决方案1】：

React 最近从 React 15.5 的核心库中删除了 PropTypes。

添加行

import PropTypes from 'prop-types';

然后直接从那里调用你的 proptypes。

【讨论】：

【解决方案2】：

似乎 PropTypes 未定义。我没有看到它在您的代码中的任何地方声明。您必须通过文档中所示的单独模块导入它：PropTypes.

更新：

也许您正在使用的库正在使用现已弃用/不支持的 React.PropTypes。我建议使用更新的库或实际进入库并更新包，以便它使用来自单独包的新 PropTypes 而不是 React.PropTypes。这应该可以解决您的问题

【讨论】：

如何使用更新的库？
@klobbaks 您必须找出哪个包已过时。它应该在错误堆栈跟踪中告诉您。找出哪个包和文件正在使用 React.PropTypes，并在安装后用“prop-types”包中的 PropTypes 替换它，或者找到一个与过时库类似的最新库并替换它。

【解决方案3】：

是的，如果你升级 react: 15 或更高，那么你必须添加import PropTypes from 'prop-types';

但最近我在“react”中遇到了同样的问题：“16.0.0-beta.5”在我改变后

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

然后它发现工作正常。希望对您有所帮助！

【讨论】：