Question

我想在电子邮件和密码正确时（点击按钮时）导航到新页面。
即点击按钮时，我想检查 API 并导航到另一个页面，如果电子邮件和密码是正确
这里我使用 AXIOS 进行 API 集成。

---------这是我的代码----------

import React, {useState} from 'react';
import {View,Text, TextInput, Button} from 'react-native';
import axios from 'axios';
import { useNavigation } from '@react-navigation/native';
const NewsCard = ()=>{

  
  const navigation = useNavigation();


  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
   const[name ,setName] = useState('namesssssssss')
    return(       
        <View>   
            <Text>{name}</Text> 
            <TextInput
          
          autoCorrect={false}
          autoCapitalize="none"
          keyboardType="email-address"
          onChangeText={ (text) => setEmail(text)}
          value={email}
        />

        <TextInput
         
          
          autoCorrect={false}
          autoCapitalize="none"
          onChangeText={(pswrd) => setPassword(pswrd)}
          value={password}
        />
            <Button onPress={ ()=>
axios.post('http://10.0.2.2:5000/api/admin/login',
{
  email: email,
  password: password,
})
.then(function (response) {
  // handle success
  console.log(response.data);
})
.catch(function (error) {
  // handle error
  alert('Wrong Email or Password');
})
.then(function () {
})
           } title="Click"></Button>
        </View>   
    )
}

export default NewsCard

Answer 1

import React, {useState} from 'react';
import {View,Text, TextInput, Button} from 'react-native';
import axios from 'axios';
import { useNavigation } from '@react-navigation/native';
const NewsCard = ()=>{

  
  const navigation = useNavigation();


  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
   const[name ,setName] = useState('namesssssssss')
    return(       
        <View>   
            <Text>{name}</Text> 
            <TextInput
          
          autoCorrect={false}
          autoCapitalize="none"
          keyboardType="email-address"
          onChangeText={ (text) => setEmail(text)}
          value={email}
        />

        <TextInput
         
          
          autoCorrect={false}
          autoCapitalize="none"
          onChangeText={(pswrd) => setPassword(pswrd)}
          value={password}
        />
            <Button onPress={ ()=>
axios.post('http://10.0.2.2:5000/api/admin/login',
{
  email: email,
  password: password,
})
.then(function (response) {
  // handle success
  navigation.navigate('SomeComponent');
  console.log(response.data);
})
.catch(function (error) {
  // handle error
  alert('Wrong Email or Password');
})
.then(function () {
})
           } title="Click"></Button>
        </View>   
    )
}

export default NewsCard
react-native

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

上面的代码可以解决您的问题，但这不是正确的方法。

要正确执行此操作，您应该在导航器中执行此操作

import * as React from "react";

import { NavigationContainer } from "@react-navigation/native";
import { useSelector } from "react-redux";

import HomeStack from "./HomeStack"; //stack navigator which holds your actual app
import AuthStack from "./AuthStack"; //stack navigator which ables a user to login to your app

export const Navigator = () => {
  // some state that you may have declared in your reducers
  const auth = useSelector((state) => state.auth);
  return (
    <NavigationContainer>
      {auth.isLoggedIn ? <HomeStack /> : <AuthStack />}
    </NavigationContainer>
  );
};

您可以阅读更多关于 authentication flows here

Answer 2

直接从 Button 调用 API 请求是非常不明智的，但这种解决方案应该可行

首先为 login 创建一个句柄函数，从 render (return) 调用 API 是不好的做法。

handleLogin

const NewsCard = ()=>{

  
const navigation = useNavigation();

const handleLogin = () => {
  axios.post('http://10.0.2.2:5000/api/admin/login',
{
  email: email,
  password: password,
})
.then(function (response) {
  // handle success
  navigation.navigate('RouteName');
  console.log(response.data);
})
.catch(function (error) {
  // handle error
  alert('Wrong Email or Password');
})
.then(function () {
})

在Button组件中调用

<Button onPress={handleLogin} title="Click"></Button>

这样你的代码看起来更易读和干净

我在使用 Axios 时在 react-native 中导航时遇到问题

2 个答案: