【问题标题】:React native Undefined is not an object(evaluating'_react3.default.PropType.shape')React native Undefined 不是一个对象(评估'_react3.default.PropType.shape')
【发布时间】:2018-03-28 15:28:14
【问题描述】:

由于这种情况,我正在使用 React-native 学习,我想为 IOS 和 Android 创建导航,实际上,我遇到了一个错误

错误:React native Undefined is not an object(evalating'_react3.default.PropType.shape')

我的开发环境

  • 操作系统:MACOS Sierra
  • Clie:react-native-cli:2.0.1
  • 反应原生版本:反应原生:0.49.3

我关注react-native官方tutorial

App.js

import React, { Component } from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Navigator from 'react-native-deprecated-custom-components';
import MyScene from './src/components/navigation/MyScene';



const instructions = Platform.select({
  ios: 'IOS: Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Android : Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
export default class App extends Component {
    render() {
        return (

            <Navigator initialRoute={{ title: 'My Initial Scene', index: 0 }}
                renderScene={(route, navigator) =>
                    <MyScene
                        title={route.title}

                        // Function to call when a new scene should be displayed
                        onForward={() => {

                            const nextIndex = route.index + 1;
                            navigator.push({
                                title: 'Scene ' + nextIndex,
                                index: nextIndex,
                            });
                        }}

                        // Function to call to go back to the previous scene
                        onBack={() => {
                            if (route.index > 0) {
                                navigator.pop();
                            }
                        }}
                    />
                }
            />
        )
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 50,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

MyScene.js

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

export default class MyScene extends Component {
    render() {
        return (
            <View>
                <Text>Current Scene: {this.props.title}</Text>
                <TouchableHighlight onPress={this.props.onForward}>
                    <Text>Tap me to load the next scene</Text>
                </TouchableHighlight>

                <TouchableHighlight onPress={this.props.onBack}>
                    <Text>Tap me to go back</Text>
                </TouchableHighlight>
            </View>
        )
    }
}

MyScene.propTypes = {
    title: PropTypes.string.isRequired,
    onForward: PropTypes.func.isRequired,
    onBack: PropTypes.func.isRequired,
};

【问题讨论】:

  • PropTypes 在最新版本中已从 react 中移除。所以你需要使用和其他包。 reactjs.org/docs/typechecking-with-proptypes.html
  • reactjs 和 react native 有区别吗?
  • 是的,它不同。但是 react-native 依赖于 react js。相同的用法只是区别一些 UI 组件。前任。
    和

标签: javascript android ios facebook react-native


【解决方案1】:

检查你的反应版本, 如果版本大于 16,则 propTypes 位于名为 prop-types 的新包中

见:https://www.npmjs.com/package/prop-types

【讨论】:

  • “反应”:“16.0.0-beta.5”,
  • do ` npm i --save prop-types ` 然后在你的组件中 import PropTypes from 'prop-types'
  • 我有同样的问题,我也尝试过这样做,但问题仍然存在。我在文件中插入了“import”行:“NavigatorBreadcrumbNavigationBar.js”,我错过了什么吗?
  • @ROI 我在这里遇到与 NavigatorBreadcrumbNavigationBar.js 相同的问题。你有没有发现这个问题?
  • 这里有同样的问题。我安装了道具类型。如果我创建了一个 test.js 文件并 require('prop-types') 它会找到它。但是在 ios 和 android 上运行都会给我这个 NavigatorBreadcrumbNavigationBar.js 错误
猜你喜欢
  • 1970-01-01
  • 2018-06-05
  • 1970-01-01
  • 2018-11-12
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多