如何导航到主屏幕在反应本机中按登录按钮?

Question

按登录按钮，我想导航到其他屏幕，基本上是一个主屏幕，身份验证需要用户名和密码。我正在使用stack navigator但是当我单击登录按钮时，它只会点击API，没有任何反应。

这是我的代码：

import React, { Component } from 'react';
import {
StyleSheet,
Platform,
Text,
Image,
View,TouchableOpacity,ImageBackground,ScrollView,AsyncStorage
} from 'react-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?&nbsp;
<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
},
});

Answer 1

之前

<Button block transparent style={styles.LoginButton} onPress = {this.onLoginPressed.bind(this)}  >

后

<Button block transparent style={styles.LoginButton} onPress = { () => this.onLoginPressed.bind(this) }  >

Answer 2

我正在使用堆栈导航器，但是当我单击登录按钮时，它只是 点击 API 但没有任何反应

这是因为您按预期点击了 api，但在登录凭据成功后无法导航到主应用程序屏幕。

所以你错过了这个：

if (response.status >= 200 && response.status < 300) {
//Handle success
this.setState({error: ""});
let accessToken = res;
this.storeToken(accessToken);
// once successful navigate to another screen
this.props.navigation.navigate('yourScreen',{}}
}