web-dev-qa-db-fra.com

Pourquoi je reçois "indéfini n'est pas un objet (évaluation de PropTypes.shape)"

Chaque fois que j'essaie d'exécuter mon simulateur iOS, j'obtiens cette erreur. Tous les modules sont installés, le chemin d'accès à mon image est correct, aucune erreur n'est générée dans mon IDE à l'exception de celle qui apparaît dans mon simulateur. Image ci-dessous d'erreur.

 Error Image

Voici 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;

Voici 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;

Voici 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;

Voici 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);
javascriptiosreactjsreact-nativewebstorm
8
klob baks

React a récemment supprimé les PropTypes de leur bibliothèque principale à partir de React 15.5.

Ajouter la ligne

import PropTypes from 'prop-types';

Et appelez vos types directement à partir de cela.

11
Ramzi C.

Il semble que PropTypes n'est pas défini. Je ne le vois pas déclaré nulle part dans votre code. Vous devez l'importer via un module séparé, comme indiqué dans les documents: PropTypes.

Mettre à jour:

Peut-être qu'une bibliothèque que vous utilisez utilise les React.PropTypes, désormais obsolètes/non pris en charge. Je recommande d'utiliser une bibliothèque plus à jour ou d'aller dans la bibliothèque et de mettre à jour le paquet afin qu'il utilise les nouveaux PropTypes du paquet séparé au lieu de React.PropTypes. Cela devrait résoudre votre problème

3
Funk Soul Ninja

Oui définitivement, si vous mettez à niveau réagissez: 15 ou plus alors vous devez ajouter import PropTypes from 'prop-types';

Mais récemment, j'ai rencontré le même problème dans "réagir": "16.0.0-beta.5" après avoir changé

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

Ensuite, cela a fonctionné bien. J'espère que ça aide!

1
Patrick R