这是我的登录功能,点击登录按钮后执行
login=()=>{
fetch('http://192.168.0.101:9090/Shakehands',{
method:'post',
headers:{
'Accept':'application/json',
'Content-type':'application/json',
},
body:JSON.stringify({
email:this.email,
password:this.password,
text:"Login"
})
})
.then((responseData)=>{
return responseData.json();
})
.then((responseData)=>{
//console.log(responseData);
//alert(this.state.insdata)
if(responseData.success==true){
this.props.navigation.navigate('Home');
}
else{
alert(responseData.message);
}
}).done();
}
这是我的 node.js 后端
con.query('SELECT * from Shakehands where email=? AND password=?',[email,password],function(error,rows,fields){
if(!!error) console.log(error);
if(rows.length>0){
res.send({'success':true,'message':'Welcome'})
}
else{
res.send(JSON.stringify({'success':false,'message':'User not found'}))
}
})
这是导航器功能
const Navigation = StackNavigator({
Splash:{
screen:Splash,
navigationOptions:{
header:null,
}
},
Login:{
screen:Login,
navigationOptions:{
header:null,
}
},
Signup:{
screen:Signup,
navigationOptions:{
header:null,
}
},
ForgetPass:{
screen:ForgetPass,
navigationOptions:{
header:null,
}
},
Home:{
screen:Home,
navigationOptions:{
header:null,
},
}
})
export default Navigation;
登录功能包含在文件 logtxtbox 中,该文件包含文本输入和一个按钮,而按钮又包含在登录文件中。
这是 Login.js 文件:
import React,{Component} from 'react';
import {View,AppRegistry,StyleSheet,ScrollView,TouchableOpacity,Text,StatusBar} from 'react-native';
import Animate from '../Components/Animate';
import Logtxtbox from '../Components/Logtxtbox';
export default class Login extends Component{
render(){
return(
<ScrollView>
<View style={styles.container}>
<StatusBar backgroundColor='#1c313a'/>
<Animate />
<Logtxtbox />
<TouchableOpacity onPress={()=>this.props.navigation.navigate('ForgetPass')}>
<Text title='ForgotPassword' style={{fontSize:16 ,marginTop:10 ,
color:'white',fontWeight:'bold'}}>ForgotPassword?</Text>
</TouchableOpacity>
<Text style={styles.sign}>Don't have an acoount yet?</Text>
<TouchableOpacity onPress={()=>this.props.navigation.navigate('Signup')}>
<Text title='SignUp' style={styles.signup}>SignUp</Text>
</TouchableOpacity>
</View>
</ScrollView>
)
}
}AppRegistry.registerComponent('Login',()=>Login)
这是 Login.js 的样式:
const styles = StyleSheet.create({
container:{
backgroundColor:'#455a64',
alignItems:'center',
height:600
},
signup:{
color:'white',
fontSize:16,
fontWeight:'bold',
textAlign:'center',
},
sign:{
textAlign:'center',
color:'white',
fontSize:16,
marginTop:20,
}
})
您必须传递this.props.navigation
给内部组件。您可以使用这部分代码:
render(){
return(
...
<Logtxtbox navigation = { this.props.navigation }/>
...
)
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句