使用 laravel 后端 API 响应本机身份验证

Question

我是 react-native 的新手。我目前尝试使用 Laravel API 设置 react-native 的登录。我使用的 API 已经过测试及其工作。但是当我尝试放入 react-native 时，它在我调用 API 时显示错误。模拟器中的警告是：可能未处理的承诺拒绝（id：0）：类型错误：网络请求失败

这是我的代码。

import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Text,
    TouchableOpacity,
    Alert,
    AsyncStorage,
} from 'react-native';
import {Actions} from 'react-native-router-flux';
import Logo from '../components/Logo';


export default class Login extends Component   {

    constructor(props) {
        super(props);
        this.state = {
            email: "",
            password: ""
        }
    };
    signup(){
        Actions.signup()
    }
    home(){
        Actions.home()
    }
    handleLogin = () => {
        fetch('http://localhost:8888/api/login',{
            method: 'POST',
            header:{
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                email: this.state.email,
                password: this.state.password,
            })
        })
        .then((response) => response.json())
        .then((res) => {

            if (res.success === true){

                alert(res.message)

            }else{
                alert(res.message)
            }

           alert('test')
        })
    }
    render() {
        return (
            <View style={styles.container}>
                <Logo/>

                <View style={styles.inputContainer}>
                    <TextInput style={styles.inputBox}
                        underlineColorAndroid='0,0,0,0'
                        placeholder='Email'
                        placeholderTextColor= 'grey'
                        keyboardType= 'email-address'
                        onChangeText={(text) => this.setState({email:text})}
                        onSubmitEditing={()=> this.password.focus()}
                    />

                    <TextInput style={styles.inputBox}
                        underlineColorAndroid='0,0,0,0'
                        placeholder='Password'
                        placeholderTextColor= 'grey'
                        secureTextEntry= {true}
                        ref={(input) => this.password = input}
                        onChangeText={(text) => this.setState({password:text})}

                    />
                    <TouchableOpacity style={styles.button} onPress={this.handleLogin}>
                        <Text style={styles.buttonText}>Login</Text>
                    </TouchableOpacity>
                </View>  

                <View style={styles.signupText}>
                    <Text>Don't have an account? </Text>
                    <TouchableOpacity onPress={this.signup}>
                        <Text style={styles.signupButton}>Signup</Text>
                    </TouchableOpacity>
                </View>

            </View>
        );
    }

}

有人知道问题出在哪里吗？

Answer 1

通过设置 adb 并使用 adb reverse 命令解决了问题。

例子

adb reverse tcp:8081 tcp:3333

使用 laravel 后端 API 响应本机身份验证

React native authentication using laravel backend API

javascript

react-native

laravel-api