I want to know how to make a user stay logged in even after the app is exited in react native, I am using restAPI to make a user login into my app and it's working fine but my problem is when a user exits the app user is displayed the home again but I want the app to display the welcome screen instead if the user has already logged in my app.
我想知道如何让用户保持登录即使应用程序退出本机,我使用restAPI让用户登录到我的应用程序,它工作正常,但我的问题是当用户退出应用程序用户是再次显示家庭但我希望应用程序显示欢迎屏幕,如果用户已经登录我的应用程序。
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
TextInput,
Form,
TouchableHighlight,
ScrollView,
Dimensions,
} from 'react-native';
// import hr from 'react-native-hr';
import Icon from 'react-native-vector-icons/FontAwesome';
import Hr from '../modules/hr.dist';
// import AndroidBackButton from 'react-native-android-back-button';
export default class Login extends Component {
constructor(props) {
super(props)
this.state = {
username: '',
password: '',
}
}
_userLogin() {
var pass = this.state.password;
var user = this.state.username;
if (pass && user) {
fetch("http://www.amkwebsolutions.com/trades/rest_login/", {
method: "POST",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
'username': user,
'password': pass
})
}).then((response) => response.json())
.then((responseData) => {
if (responseData.status==1) {
this.props.navigator.replace({id: 'welcome', userData: {userId: responseData.user_id, userName: responseData.display_name, userAvatar: responseData.user_avtar} })
} else {
alert("Incorrect Username or Password")
}
}).done();
}
}
render() {
return (
<View style={{flex: 1}}>
<View style={styles.header_main} >
<TouchableHighlight onPress={() => this.props.navigator.push({id: 'home'})}><Icon name="arrow-left" size={20} color="black" /></TouchableHighlight>
<Image source={{uri: 'http://res.cloudinary.com/vowelweb/image/upload/v1498114115/Logo_mqzlgt.png'}} style={styles.header_logo}/>
<Icon name="list-ul" size={20} color="black" />
</View>
<View style={styles.body_main}>
<Text style={styles.body_main_heading} >LOGIN</Text>
<View style={styles.body_main_view_image}>
<Image source={require("../images/Login.png")} style={styles.body_main_image}/>
</View>
<View style={styles.body_main_form}>
<TextInput
underlineColorAndroid='transparent'
placeholder="Username"
returnKeyLabel = {"next"}
onChangeText={(text) => this.setState({username:text})}
placeholderTextColor = "white"
style={{height: 50, borderRadius: 45, marginLeft: 20, marginRight: 20, marginTop: 0, backgroundColor: '#a6a6a8', fontFamily: 'Montserrat-SemiBold', color: 'white', fontSize: 18, paddingLeft: 65,}}
/>
<TextInput
underlineColorAndroid='transparent'
secureTextEntry = {true}
placeholder="Password"
placeholderTextColor = "white"
returnKeyLabel = {"go"}
onChangeText={(password) => this.setState({password:password})}
style={{height: 50, borderRadius: 45, marginLeft: 20, marginRight: 20, marginTop: 20, backgroundColor: '#a6a6a8', fontFamily: 'Montserrat-SemiBold', color: 'white', fontSize: 18, paddingLeft: 65,}}
/>
</View>
</View>
<View style={{flex: 1, backgroundColor: '#efeff2',}}>
<TouchableHighlight style={styles.button} onPress={() => this._userLogin()} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Sign in</Text>
</TouchableHighlight>
</View>
<View style={{flex: 0.6, backgroundColor: '#efeff2', flexDirection: 'row', paddingTop: 5, paddingLeft:20, paddingRight: 18,}}>
<TouchableHighlight onPress={() => this.props.navigator.push({id: 'register'})}><Text style={{fontFamily: 'Montserrat-SemiBold', color: 'black', fontSize: 16, paddingRight: 100,}}>Create Account</Text></TouchableHighlight>
<TouchableHighlight onPress={() => this.props.navigator.push({id: 'forgetpassword'})}><Text style={{fontFamily: 'Montserrat-SemiBold', color: 'black', fontSize: 16,}}>Forgot Password ?</Text></TouchableHighlight>
</View>
<View style={{flex: 0.4, paddingLeft: 10, paddingRight:10, backgroundColor: '#efeff2', alignItems: 'center', flexDirection: 'row',}}>
<Hr lineStyle={{backgroundColor: "#a6a6a8"}} text='or' textStyle={{color: 'black', fontFamily: 'Montserrat-SemiBold', fontSize: 16,}}/>
</View>
<View style={{flex: 1, flexDirection: 'row', paddingLeft: 20, alignItems: 'center', backgroundColor: '#efeff2',}}>
<Text style={{color: 'black', fontFamily: 'Montserrat-SemiBold', fontSize: 16, paddingRight: 35,}}>Connect with us</Text>
<Image source={require("../images/Facebook.png")} style={{width: 50, height: 50, marginRight: 20,}} />
<Image source={require("../images/Tumblr.png")} style={{width: 50, height: 50, marginRight: 20,}} />
<Image source={require("../images/Google.png")} style={{width: 50, height: 50,}} />
</View>
</View>
);
}
}
var styles = StyleSheet.create({
container: {
flex: 1,
},
header_main: {
flex: 1.3,
paddingLeft: 20,
paddingRight:20,
backgroundColor: 'white',
justifyContent: 'center',
flexDirection: 'row',
borderBottomWidth:1,
alignItems: 'center',
},
header_logo: {
flex:1,
width:350,
height:100,
resizeMode:'contain',
marginRight: 12,
marginLeft: 12,
},
body_main: {
flex: 4,
backgroundColor: '#efeff2',
justifyContent: 'center'
},
body_main_heading: {
textAlign:'center',
fontSize:24,
paddingTop:10,
fontFamily: 'Montserrat-SemiBold',
color: 'black',
},
body_main_view_image: {
flex: 1,
backgroundColor: '#efeff2',
flexDirection: 'row',
justifyContent: 'center',
paddingTop: 0,
},
body_main_image: {
width:null,
height:null,
resizeMode:'contain',
paddingLeft: 50,
paddingRight:50
},
body_main_input: {
},
buttonText: {
fontSize: 18,
color: 'white',
alignSelf: 'center',
fontFamily: 'Montserrat-SemiBold',
},
button: {
height: 50,
backgroundColor: '#217821',
borderColor: '#217821',
borderWidth: 1,
borderRadius: 45,
marginTop: 20,
alignSelf: 'stretch',
justifyContent: 'center',
marginLeft: 20,
marginRight: 20,
},
});
1 个解决方案
#1
1
You have to store user credentials and check in main activity, follow this link https://www.tutorialspoint.com/android/android_shared_preferences.htm
您必须存储用户凭据并签入主要活动,请点击此链接https://www.tutorialspoint.com/android/android_shared_preferences.htm
#1
1
You have to store user credentials and check in main activity, follow this link https://www.tutorialspoint.com/android/android_shared_preferences.htm
您必须存储用户凭据并签入主要活动,请点击此链接https://www.tutorialspoint.com/android/android_shared_preferences.htm