Question

我正在尝试在我的tcomb-form-native（android）应用中使用react-native，但我收到此错误消息：undefined is not an object (evaluating '_react.PropTypes.string')反应原生

我使用以下命令安装tcomb-form-native：

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

这是我的代码：

登录.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

自React v15.5起，React.PropTypes已移入另一个包中。您应该使用prop-types库。

import PropTypes from 'prop-types'

而不是

import { PropTypes } from 'react'

反应原生错误

1 个答案: