wake-up-neo.com

Warum bekomme ich "undefined ist kein Objekt (PropTypes.shape evaluiert)"?

Immer wenn ich versuche, meinen iOS-Simulator auszuführen, erhalte ich diesen Fehler. Alle Module sind installiert, der Dateipfad zu meinem Bild ist korrekt, es werden keine Fehler in meiner IDE ausgegeben, außer dem, der in meinem Simulator angezeigt wird. Bild unten des Fehlers.

 Error Image

Hier ist 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;

Hier ist 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;

Hier ist 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;

Hier ist 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);
8
klob baks

React entfernte kürzlich PropTypes aus React 15.5.

Fügen Sie die Zeile hinzu

import PropTypes from 'prop-types';

Und rufen Sie Ihre Vorschläge direkt an.

11
Ramzi C.

PropTypes scheint undefiniert zu sein. Ich sehe es nirgendwo in Ihrem Code deklariert. Sie müssen es über ein separates Modul importieren, wie in den Dokumenten gezeigt: PropTypes.

Aktualisieren:

Möglicherweise verwendet eine von Ihnen verwendete Bibliothek die jetzt veralteten/nicht unterstützten React.PropTypes. Ich empfehle, eine aktuellere Bibliothek zu verwenden oder tatsächlich in die Bibliothek zu gehen und das Paket zu aktualisieren, sodass die neuen PropTypes aus dem separaten Paket anstelle von React.PropTypes verwendet werden. Dies sollte Ihr Problem beheben

3
Funk Soul Ninja

Ja definitiv, wenn Sie ein Upgrade durchführen: 15 oder höher, dann müssen Sie import PropTypes from 'prop-types'; hinzufügen.

In letzter Zeit hatte ich jedoch das gleiche Problem in "reagieren": "16.0.0-beta.5", nachdem ich mich geändert hatte

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

Dann hat es gut funktioniert. Ich hoffe es hilft!

1
Patrick R