陣營

Question

我想在我的react-native（機器人）的應用程序使用tcomb-form-native機錯誤，但我收到此錯誤信息：undefined is not an object (evaluating '_react.PropTypes.string')反應本土

我用下面的命令進行安裝tcomb外形本地：

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

這是我的代碼：

註冊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

由於陣營V15.5，React.PropTypes已經移動到一個不同的包。您應該改用prop-types庫。

import PropTypes from 'prop-types' 

，而不是

import { PropTypes } from 'react'