Reactネイティブアプリ

Question

iOSシミュレータでundefined is not object (evaluating 'ReactPropTypes.string)エラーが発生しているのを実際に見ることができません。 WebStorm IDEの私のコードは私に何かエラーを投げるわけではありません。私はnode_modulesフォルダを削除してからnpm installをTerminalに実行しようとしましたが、これは通常ほとんどの問題を解決しますが、この場合は解決しないためです。

はここSecured.jsです：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ScrollView, Text, View, Button } from 'react-native'; 
import { logout } from '../redux/actions/auth'; 
import DropdownMenu from 'react-native-dropdown-menu'; 
import Icon from './Icon'; 

class Secured extends Component { 
    render() { 
     var data = [["Choice 1"], ["Choice 2"], ["Choice 3"], ["Choice 4"]]; 

     return(
      <ScrollView style={{padding: 20}}> 
       <Icon/> 

       <Text style={{fontSize: 27}}> 
        {`Welcome ${this.props.username}`} 
       </Text> 

       <View style={{flex: 1}}> 

        <DropdownMenu style={{flex: 1}} 
            bgColor={"purple"} //the background color of the head, default is grey 
            tintColor={"white"} //the text color of the head, default is white 
            selectItemColor={"orange"} //the text color of the selected item, default is red 
            data={data} 
            maxHeight={410} // the max height of the menu 
            handler={(selection, row) => alert(data[selection][row])} > 

         <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}} > 
         </View> 
        </DropdownMenu> 

       </View> 

       <View style={{margin: 20}}/> 

       <Button onPress={(e) => this.userLogout(e)} title="Logout"/> 

      </ScrollView> 
     ); 
    } 
} 

const mapStateToProps = (state, ownProps) => { 
    return { 
     username: state.auth.username 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onLogout:() => { dispatch(logout()); } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Secured); 

はここLogin.jsです：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { ScrollView, Text, TextInput, View, Button, StyleSheet } from 'react-native'; 
import { login } from '../redux/actions/auth'; 
import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity'; 

const awsCognitoSettings = { 
    UserPoolId: 'something', 
    ClientId: 'something' 
}; 

class Login extends Component { 
    constructor (props) { 
     super(props); 
     this.state = { 
      page: 'Login', 
      username: '', 
      password: '' 
     }; 
    } 

    get alt() { return (this.state.page === 'Login') ? 'SignUp' : 'Login'; } 

    handleClick (e) { 
     e.preventDefault(); 
     const userPool = new CognitoUserPool(awsCognitoSettings); 

     // Sign up 
     if (this.state.page === 'SignUp') { 
      const attributeList = [ 
       new CognitoUserAttribute({ Name: 'email', Value: this.state.username }) 
      ]; 
      userPool.signUp(
       this.state.username, 
       this.state.password, 
       attributeList, 
       null, 
       (err, result) => { 
        if (err) { 
         alert(err); 
         this.setState({ username: '', password: '' }); 
         return; 
        } 
        console.log(`result = ${JSON.stringify(result)}`); 
        this.props.onLogin(this.state.username, this.state.password); 
       } 
      ); 
     } else { 
      const authDetails = new AuthenticationDetails({ 
       Username: this.state.username, 
       Password: this.state.password 
      }); 
      const cognitoUser = new CognitoUser({ 
       Username: this.state.username, 
       Pool: userPool 
      }); 
      cognitoUser.authenticateUser(authDetails, { 
       onSuccess: (result) => { 
        console.log(`access token = ${result.getAccessToken().getJwtToken()}`); 
        this.props.onLogin(this.state.username, this.state.password); 
       }, 
       onFailure: (err) => { 
        alert(err); 
        this.setState({ username: '', password: '' }); 
        return; 
       } 
      }); 
     } 
    } 

    togglePage (e) { 
     this.setState({ page: this.alt }); 
     e.preventDefault(); 
    } 

    render() { 
     return (
      <ScrollView style={{padding: 20}}> 
       {/*<Text style={styles.title}>Welcome!</Text>*/} 
       <TextInput 
        style={styles.pw} 
        placeholder=' Email Address' 
        autoCapitalize='none' 
        autoCorrect={false} 
        autoFocus={true} 
        keyboardType='email-address' 
        value={this.state.username} 
        onChangeText={(text) => this.setState({ username: text })} /> 

       <TextInput 
        style={styles.pw} 
        placeholder=' Password' 
        autoCapitalize='none' 
        autoCorrect={false} 
        secureTextEntry={true} 
        value={this.state.password} 
        onChangeText={(text) => this.setState({ password: text })} /> 

       <View style={{margin: 7}}/> 
        <Button onPress={(e) => this.handleClick(e)} title={this.state.page}/> 
        <View style={{margin: 7, flexDirection: 'row', justifyContent: 'center'}}> 

         <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}> 
          {this.alt} 
         </Text> 
       </View> 

      </ScrollView> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    title: { 
     fontSize: 27, 
     textAlign: 'center' 
    }, 

    icon: { 
     position: 'absolute' 
    }, 

    pw: { 
     paddingRight: 90, 
     justifyContent: 'flex-end', 
     marginBottom: 20, 
     backgroundColor: '#9b42f4', 
     height: 40, 
     borderWidth: 1, 
     borderRadius: 5 
    }, 

    buttons: { 
     fontFamily: 'AvenirNext-Heavy' 
    } 
}); 

const mapStateToProps = (state, ownProps) => { 
    return { 
     isLoggedIn: state.auth.isLoggedIn 
    }; 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
     onLogin: (username, password) => { dispatch(login(username, password)); } 
    } 
} 

export default connect(mapStateToProps, mapDispatchToProps)(Login); 

Answer 1

チェックこのアウトは、これが問題あなたがhttps://github.com/facebook/react-native/issues/14588#issuecomment-309683553

npm install react@16.0.0-alpha.12は、問題を解決抱えているように見えます。