2017-07-20 36 views
0

我不確定爲什麼我不能點擊LoginSignup。它呈現如下圖所示的藍綠色。我知道這很簡單,但我似乎無法發現它。
enter image description here無法在iOS模擬器中點擊文本字段或按鈕

這裏的index.ios.js文件:

import React, { Component } from 'react'; 
import { AppRegistry, Text } from 'react-native'; 
import { Provider } from 'react-redux'; 
import Application from './pages/Application'; 
import store from './redux'; 
import api from './utilities/api'; 

export default class DApp extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      data: [], 
      isLoading: true 
     } 
     console.log("something"); 
    } 

    componentWillMount() { 
     api.getData().then((res) => { 
      this.setState({ 
       data: res.data 
      }) 
     }); 
    } 

    render() { 
     if(this.state.isLoading) { 
      console.log("The data is: " + this.state.data); 
     } else { 
      console.log("Else got executed"); 
     } 

     return (

      <Provider store={store}> 
       <Application/> 
      </Provider> 
     ); 
    } 
} 

AppRegistry.registerComponent('DApp',() => DApp); 

這裏的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: 'some id', 
    ClientId: 'some id' 
}; 

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.userame }) 
      ]; 
      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={{fontSize: 27}}>{this.state.page}</Text> 
       <TextInput 
        placeholder='Email Address' 
        autoCapitalize='none' 
        autoCorrect={false} 
        autoFocus={true} 
        keyboardType='email-address' 
        value={this.state.username} 
        onChangeText={(text) => this.setState({ username: text })} /> 
       <TextInput 
        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={{fontSize: 12, color: 'blue'}}> 
         {this.alt} 
        </Text> 
       </View> 
      </ScrollView> 
     ); 
    } 
} 

const styles = StyleSheet.create({ 
    background: { 
     width: null, 
     height: null, 
     flex: 1 
    } 
}); 

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); 
+0

您是否啓用了檢查模式? 更多:https://facebook.github.io/react-native/docs/debugging.html – Grandas

回答

1

您已啓用督察。執行Cmd + D打開開發人員菜單並禁用檢查器。

+0

哇......我知道這很簡單。非常感謝,我爲這個愚蠢的問題表示歉意。 –

+0

別擔心。現在你知道一些關於如何使用開發者菜單的知識 – hyb175