onPress кнопки входа, я хочу перейти на какой-то другой экран, в основном домашний экран с аутентификацией, используя имя пользователя и пароль.Я использую стековый навигатор, но когда я нажимаю на кнопку входа в систему, он просто попадает в API и ничего не происходит.
import React, {Component} из 'response';import {StyleSheet, Platform, Text, Image, View, TouchableOpacity, ImageBackground, ScrollView, AsyncStorage} из'act-native ';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
import { TabNavigator, StackNavigator } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';
import EvilIcons from 'react-native-vector-icons/EvilIcons';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import { Container, Header, Content, Card, CardItem, Thumbnail, Button, Left, Body, Right, Item, Input } from 'native-base';
const ACCESS_TOKEN = 'access_token';
export default class Landing extends Component {
static navigationOptions = {
header: false
};
constructor(props) {
super(props);
this.state = {
username: "",
password: "",
error: "",
};
}
async storeToken(accessToken){
try{
await AsyncStorage.setItem(ACCESS_TOKEN, access_token)
this.getToken();
} catch (error) {
console.log("Something went wrong")
}
}
async getToken(accessToken){
try{
let token = await AsyncStorage.getItem(ACCESS_TOKEN)
console.log("token is: " + token)
} catch (error) {
console.log("Something went wrong")
}
}
async removeToken(){
try{
await AsyncStorage.getItem(ACCESS_TOKEN)
console.log("token is: " + token)
this.getToken();
} catch (error) {
console.log("Something went wrong")
}
}
async onLoginPressed() {
this.setState({showProgress: true})
try {
let response = await fetch('https://fb3b2e18.ngrok.io/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
username: this.state.username,
password: this.state.password,
})
});
let res = await response.text();
if (response.status >= 200 && response.status < 300) {
//Handle success
this.setState({error: ""});
let accessToken = res;
this.storeToken(accessToken);
console.log( "res token: " + accessToken);
//On success we will store the access_token in the AsyncStorage
this.storeToken(accessToken);
} else {
//Handle error
let error = res;
throw error;
}
} catch(error) {
this.removeToken();
this.setState({error: error});
console.log("error " + error);
}
}
render() {
const {goBack} = this.props.navigation;
var {navigate} = this.props.navigation;
return (
<ImageBackground source={require('./landing.png')} style={styles.backgroundImage}>
<ScrollView automaticallyAdjustContentInsets={false} style={styles.scrollView}>
<Text style={styles.welcome}>
Welcome to Flipclip
</Text>
<View style={{alignItems: 'center', flex: 1,marginBottom: 60}}>
<Item style={{width: 310,marginBottom: 10}}>
<EvilIcons style={{color:'#fefefe'}} name='user' size={20} />
<Input
style={{color: '#f5f5f5',fontSize: 14,fontFamily: 'Montserrat-Regular',}}
placeholder='User Name'
placeholderTextColor= '#f5f5f5'
onChangeText={ (text)=> this.setState({username: text}) }
/>
</Item>
<Item style={{width: 310}}>
<Icon style={{color:'#fefefe'}} name='ios-lock-outline' size={20}/>
<Input
style={{color: '#f5f5f5',fontSize: 14, marginLeft: 5,fontFamily: 'Montserrat-Regular',}}
placeholder='Password'
placeholderTextColor= '#f5f5f5'
onChangeText={ (text)=> this.setState({password: text}) }
/>
</Item>
</View>
<View style={{alignSelf: 'center', flex: 1}}>
<Button block transparent style={styles.LoginButton} onPress = {this.onLoginPressed.bind(this)} >
<Text style={styles.logintext}>Sign In</Text>
</Button>
</View>
<View style={{justifyContent: 'center'}}>
<Text style={styles.SignUpResendOtpText}>
Don’t have an account?
<Text style={styles.SignUpResendOtpLink} onPress = { () => navigate ("SignUp", {}) }>
Sign Up
</Text>
</Text>
</View>
<Text style={styles.error}>
{this.state.error}
</Text>
</ScrollView>
</ImageBackground>
)
}
}
const styles = StyleSheet.create({
scrollView:{
backgroundColor: 'rgba(0,0,0,0.7)',
flex:1,
},
backgroundImage: {
flex: 1,
width: null,
height: null,
},
text: {
color: 'white',
fontSize: 32,
},
uploaderName:{
fontSize: 16,
color: '#fefefe'
},
welcome: {
fontSize: 28,
color: '#f5f5f5',
textAlign: 'center',
marginTop: 201,
marginBottom: 135,
fontFamily: 'FredokaOne-Regular'
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
LoginButton: {
borderRadius:100,
backgroundColor: '#ff0046',
width: 310,
marginBottom: 20,
},
logintext:{
color: '#f5f5f5',
fontSize: 14,
fontFamily: 'Montserrat-Medium',
},
error: {
color: 'red',
paddingTop: 10
},
SignUpResendOtpText: {
color: '#f5f5f5',
textAlign: 'center',
fontSize: 14,
fontFamily: 'Montserrat-Regular',
},
SignUpResendOtpLink:{
color: '#ff0046',
textAlign: 'center',
fontSize: 14,
fontFamily: 'Montserrat-Medium',
textDecorationLine: 'none',
textDecorationStyle: 'solid',
textDecorationColor: '#000'
},
success: {
color: 'green',
paddingTop: 10
},
});