反应本机错误

Question

I'm trying to use tcomb-form-native in my react-native (android) app but i get this error msg: undefined is not an object (evaluating '_react.PropTypes.string') react native

I used following commands for install tcomb-form-native :

npm install tcomb-form-native 
npm install tcomb --save 
npm install tcomb-json-schema

this is my code :

Sign in.js

import React, { Component, PropTypes } from 'react';
import {
    StyleSheet,
    Image,
    KeyboardAvoidingView,
    Alert,
    TouchableHighlight,
} from 'react-native';
import t from 'tcomb-form-native';


const Form = t.form.Form;

const Login = t.struct({
    username: t.String,
    password: t.String
});

const options = {
    fields: {
        password: {
            type: 'password',
            placeholder: 'Password',
        },
        username: {
            placeholder: 'e.g: abc@gmail.com',
            error: 'Insert a valid email'
        }
    }
}

class SignIn extends Component {

    onPress() {
        const value = this.refs.form.getValue();
        if (value) {
            console.log(value);
        }
    };

    render() {
        return (
            <View style={styles.container}>
                <Form
                    ref="form"
                    type={Login}
                    options={options}
                />

                <Text style={{color: 'blue', marginBottom: 10}}
                      onPress={() => Linking.openURL('https://www.google.co.in')}>
                    Forgot Password?
                </Text>

                <TouchableHighlight style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
                    <Text style={styles.buttonText}>Sign In</Text>
                    </TouchableHighlight>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container: {
        justifyContent: 'center',
        marginTop: 50,
        padding: 20,
        backgroundColor: '#ffffff',
    },
    title: {
        fontSize: 30,
        alignSelf: 'center',
        marginBottom: 30
    },
    buttonText: {
        fontSize: 18,
        color: 'white',
        alignSelf: 'center'
    },
    button: {
        height: 36,
        backgroundColor: '#48BBEC',
        borderColor: '#48BBEC',
        borderWidth: 1,
        borderRadius: 8,
        marginBottom: 10,
        alignSelf: 'stretch',
        justifyContent: 'center'
    }
});

export default SignIn;

Index.js

import React, { Component } from 'react';
import { Scene, Router } from 'react-native-router-flux';
import Page1  from './src/page1';
import Page2  from './src/page2';
import Login from './src/components/login/Login';
import SignUp from './src/components/login/SignUp';
import SignIn from './src/components/login/SignIn';
import GeoMap from './src/components/maps/GeoMap';

class App extends Component {
  render() {
    return (
      <Router>
          <Scene key="root">
          <Scene key="signIn"   component={SignIn} hideNavBar={true}  title="Sign In" initial="true"/>
          <Scene key="login"    component={Login} hideNavBar={true}  title="Login" />
          <Scene key="p1"       component={Page1}   title="Page1" />
          <Scene key="p2"       component={Page2}   title="Page2" />
          <Scene key="signIn"   component={Login}   title="Sign In" />
          <Scene key="signUp"   component={SignUp}  title="Sign Up" />
          <Scene key="geoMap"   component={GeoMap}  title="Maps" />
        </Scene>
      </Router>
    );
  }
}

export default App;

index.android.js

import {
    AppRegistry
} from 'react-native';
import App from './app/index';

AppRegistry.registerComponent('GravitonApp', () => App);

Answer 1

Since React v15.5, React.PropTypes has moved into a different package. You should use the prop-types library instead.

import PropTypes from 'prop-types'

instead of

import { PropTypes } from 'react'