Question

我正在尝试使用react-native创建一个登录屏幕。我的问题是，在不重新加载测试设备的情况下，按“登录”按钮无法导航至正确的屏幕。这意味着我从api获取了正确的身份验证令牌，但是导航不起作用。我究竟做错了什么？

这是我的登录页面：

import React, {Component} from 'react';
import {Platform, StyleSheet, TextInput, Button, View, AsyncStorage, Alert} from 'react-native';
import axios from 'axios';
//import Loading from '../common/Loading'
//import Navigation from '../common/navigation'
import { onSignIn, STORAGE_KEY } from '../common/auth';
import Logout from './logout.js'
import {createStackNavigator, createAppContainer } from "react-navigation";
import SignedIn from '../navigation/SignedIn.js'
import logout from './logout.js'



export default class login extends Component {



  constructor(props){
    super(props);
    this.state = {
      email: '',
      password: '',


    };
}
// funktio joka hoitaa apikutsun eli hakee apista tokenin joka vahvistaa kirjautumisen.
  loginUser() {
    const { email, password,} = this.state;
    //tähän myöhemmin virheiden käsittely
    return axios.post("https://*******.com/auth",{
        email: email,
        password: password
    })
    // apista saatu token annetaan arvoksi STORAGE_KEY:lle
    .then((response) =>  {
      return onSignIn(STORAGE_KEY, response.token);



    })

}

  render() {
      const { navigate } = this.props.navigation;
    return (

      <View>
            <TextInput
        style={styles.input}
        onChangeText={(text) => this.setState({email: text})}
        placeholder="E-Mail"
      />
      <TextInput
        style={styles.input}
        onChangeText={(text) => this.setState({password:text})}
        secureTextEntry={true}
        placeholder="Password"
      />

      <Button onPress={() => {
        this.loginUser().then(() => navigate('SignedIn'));
        }}
        style={styles.button}
        title="Login">
      </Button>
    </View>

)};

}
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
    },
  });

Answer 1

尝试在登录功能中执行以下操作，同时从navigation调用登录功能时传递onPress。

loginUser(navigation) {
    const { email, password,} = this.state;
    //tähän myöhemmin virheiden käsittely
    axios.post("https://*******.com/auth",{
        email: email,
        password: password
    })
    // apista saatu token annetaan arvoksi STORAGE_KEY:lle
    .then((response) =>  {
      navigation.navigate('SignedIn');
      return onSignIn(STORAGE_KEY, response.token);

})

Answer 2

this.loginUser（）没有使用方法 this.loginUser().then(() => navigate('SignedIn'));

你可以试试这个吗？它会起作用。

loginUser() {
    const { email, password,} = this.state;
    const { navigate } = this.props.navigation;
    //tähän myöhemmin virheiden käsittely
    return axios.post("https://*******.com/auth",{
        email: email,
        password: password
    })
    // apista saatu token annetaan arvoksi STORAGE_KEY:lle
    .then((response) =>  {
      return onSignIn(STORAGE_KEY, response.token);
    })
    .then(() => navigate('SignedIn'))
  }

React-Native按钮无法导航到下一页

2 个答案: