如何在本机反应中将值传递给构造函数 this.setstate

用户5553868

目前,我想要setStateuserId构造函数里面。我想要的是在登录成功或调用firebase.auth.currentUser.uid存储的内容存储到userIdhandleLogin

我在编程方面的知识很差。所以请忽略程序中的其他错误。

我的代码:

import React from 'react';
import { StyleSheet, 
          Text, 
          View, 
          TouchableOpacity,
          AsyncStorage,
        } from 'react-native';

import {RkTextInput, RkButton } from 'react-native-ui-kitten';
import {Actions} from 'react-native-router-flux';
import { createSwitchNavigator, createAppContainer  } from 'react-navigation';

import Profile from "../Profile/Profile";
import SignUp from '../SignUp/SignUp';


import * as firebase from 'firebase';


export default class Login extends React.Component {

  constructor(props){
    super(props)

    this.state=({
      email:'[email protected]',
      password:'123123',
      userId:'',
      errorMessage: null
    })
  }

  componentDidMount() {
    this._loadInitialState().done();
  }
    _loadInitialState = async () => {
      let value= await AsyncStorage.getItem(this.state.userId)
    }
    signup() {
      Actions.signup()
    }
    Home() {
      Actions.home()
    }

    handleLogin = (email, password, userId) => {

      firebase.auth().signInWithEmailAndPassword(email, password).then(

        this.setstate ({
          userId: firebase.auth().currentUser.uid
        }),
        alert(this.state.userId)

     ).catch(function(error) {
         var errorCode = error.code;
         var errorMessage = error.message;

         if (errorCode === 'auth/wrong-password') {
             alert('Wrong password.');
         } else {
             alert(errorMessage);         
         }
         console.log(error);
     });
    }

  render() {
    return (
      <View style={styles.container}>

        <Text style={styles.titleText}>Taams</Text>
        <Text style={styles.edition}>Developer's Edition</Text>
        <Text style={styles.titleText}>Login.js</Text>
        <Text>Alpha 0.0.0.1</Text>

        {/*-----UserName Input-------*/}
        <RkTextInput 
            rkType= 'rounded' 
            labelStyle= {{color: 'black', fontWeight: 'bold'}}
            placeholder='UserName'
            //--------------value Handler----------------//
            onChangeText={(email) => this.setState({email})}

            //---------------------------------//
            selectionColor="#000000"
            keyboardType="email-address"
            onSubmitEditing={() => { this.password.focusInput(); }}
            inputStyle={{
            color: 'black',
            fontWeight: 'bold',
            }}/>


         {/*-----Password-------*/}
        <RkTextInput 
            secureTextEntry={true}
            rkType= 'rounded' 
            placeholder='Password'
            //--------------value Handler----------------//
            onChangeText={(password) => this.setState({password})}

            //---------------------------------//
            ref={(input) => { this.password = input; }}
            inputStyle={{
            color: 'black',
            fontWeight: 'bold',
            }}/>

        <RkButton onPress = {()=>this.handleLogin(this.state.email,this.state.password)}>
          <Text style={styles.LoginButtonText}>Login</Text>
        </RkButton>

           <View style={styles.signupTextCont}>
            <Text style={styles.signupText}>Don't have an account yet?</Text>
            <TouchableOpacity onPress={this.signup}><Text style={styles.signinButton}>SignUp</Text></TouchableOpacity> 
        </View>
      </View>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  signupTextCont:{
    flexGrow: 0,
    alignItems:'center',
    justifyContent:'flex-end',
    marginVertical:15
},
signupText:{
    color:'rgba(64,64,64,0.6)',
    fontSize:16
},
signinButton:{
    color:'#000000',
    fontSize:16,
    fontWeight:'500'
},
  titleText: {
    fontSize: 20,
    fontWeight: 'bold',
  },
  edition: {
    fontSize: 15,
    //fontWeight: 'bold',
  },
  TextInput: {
    width: 300,
    height:50,
    borderColor: 'grey',
    borderWidth: 1,
  },
  LoginButtonText: {
    fontSize: 20,
    fontWeight: 'bold',
    color: 'white',
    //alignItems: 'center'

  },
});
瓦希德·阿赫塔尔

如果您来自不同的屏幕并在登录屏幕上导航,那么您需要像这样在 react-navigation 的参数中传递 userId

this.props.navigation.navigate('Login', params)

并像这样在构造函数中获取这些参数以获取 userId

this.props.navigation.getParams('params')

如果您在登录屏幕上并调用您的 auth 函数进行用户身份验证,并且您的组件中也需要此数据,那么您需要在 auth 函数的响应上设置状态

setState({userData: res})

或者你可以在构造函数中进行初始化

this.state={ userId: firebase.auth.currentUser.uid }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章