React Native Android Fetch连接到本地API失败

Question

我在react原生Android应用程序中使用FetchAPI向本地API发出请求。我通常从react web apps的http://localhost:8163.

我正在调试模式下在物理设备上测试我的应用程序。我在某个地方读到，react native无法像web应用程序一样查询localhost。显然，您必须使用http://10.0.2.2:[PORT\u NUMBER\u HERE]/是的别名`http://127.0.0.1:根据Android仿真器码头的数据，这里有[端口号]。我不确定这是否是我在物理设备上测试时应该做的。

我的获取代码如下所示：

fetchToken() {
    fetch('http://10.0.2.2:8163/extension/auth', {
        method: 'GET',
        headers: {
            'Accept': 'application/json',
            'Content-type': 'application/json'
        }
    })
    .then((response)) => console.log('successful fetchToken response: ', response.json()))
    .catch((error) => console.log('fetchToken error: ', error))
    .done();
}

请求总是挂起一段时间，然后到达catch块，出现无帮助的错误TypeError:networkrequest失败（…） 。检查本地API的日志，他们根本不注册请求。

所以我不知道我是否正确地查询我的本地API来获取我想要的资源，如果我是，我不知道为什么抓取失败。




Answer 1

就我而言，我试图向http://localhost:3000使用axios，但每次我得到网络错误作为响应。然后我发现我需要向http://10.0.2.2:3000如果是android模拟器。对于iOS模拟器，它可以与http://localhost:3000。

使用

http://10.0.2.2:3000

而不是

http://localhost:3000

更好的选择是将计算机的本地服务器端口映射到设备中的同一端口

1. 请参阅已连接设备的列表。它可以是模拟器或真实设备

$ adb devices                                   

List of devices attached
emulator-5554   device <--- emulator
2681523e        device <-- real device

$ adb -s emulator-5554 reverse tcp:3000 tcp:3000

$ adb -s 2681572e reverse tcp:3000 tcp:3000 

你完蛋了。

Answer 2

运行以下命令以访问localhost或127.0.0.1或计算机的ip

adb -s <device_name> reverse tcp:backend_port tcp:backend_port

例子：

adb -s emulator-5554 reverse tcp:3000 tcp:3000

现在，您可以在组件中使用如下所示。

import React from 'react';
import {View,Image,TextInput, TouchableOpacity, StyleSheet, ImageBackground, AsyncStorage} from 'react-native';
import {Text,Button} from 'native-base';
    export class Login extends React.Component{
    constructor(props){
        super(props);
        this.state={username:'',password:''}
      }
      login = () =>{
        fetch('http://localhost:3000/users',{
          method:'POST',
            headers:{
              'Accept':'application/json',
              'Content-Type':'application/json'
            },
            body:JSON.stringify({
              username:this.state.username,
              password:this.state.password
            })
        })
        .then((response)=>response.json())
        .then((res)=>{
          if(res.success===true){
            var username=res.message;
            AsyncStorage.setItem('username',username);
            this.props.navigation.navigate('app');
            alert("Login success");
          } else{
            alert("Invalid Credentials");
          }
        })
        .done();
      }
    render(){
      return (
    <View style={styles.content}>
                <Text style={styles.logo}>- WELCOME -</Text>
                <View>
                  <TextInput underlineColorAndroid='transparent' style={styles.input} placeholder="Username"
                  onChangeText={(username)=>this.setState({username})}
                  value={this.state.username}>
                  </TextInput>
                  <TextInput secureTextEntry={true} underlineColorAndroid='transparent' style={styles.input} placeholder="Password"
                  onChangeText={(password)=>this.setState({password})}
                  value={this.state.password}>
                  </TextInput>
                </View>
                <TouchableOpacity onPress={this.login} style={styles.buttonContainer}>
                  <Text style={styles.buttonText}>LOGIN</Text>
                </TouchableOpacity>
              </View>
    );
    }
    }
    const styles = StyleSheet.create({
      container:{
        flex:1,
      },
      content:{
        opacity:0.9,
        backgroundColor:'white',
        borderWidth:2,
        margin:10,
        alignItems: 'center',
      },
      logo:{
        justifyContent: 'center',
        alignItems: 'center',
        fontSize:45,
        color:'black',
        textShadowColor:'gray',
        textShadowRadius:10
      },
      input:{
        borderRadius:10,
        padding:10,
        color:'black',
        borderWidth:2,
        borderColor:'lightgray',
        width:200,
        margin:5
      },
      buttonContainer:{
        margin:10,
        padding:10,
        justifyContent: 'center',
        alignItems: 'center',
      },
      buttonText:{
        borderRadius:100,
        padding:10,
        backgroundColor:'magenta',
        color:'white',
        textAlign:'center',
        width:100
      }

    });

输出：

Answer 3

您无法访问本地开发服务器，因为ADB尚未转发该端口。当您运行react native run android时，react native会将端口8081映射到USB上的移动设备。当您断开USB连接时，您将无法再刷新或热重新加载代码。因此，在这种情况下，您可以做两件事，要么像React Native一样映射本地服务器端口，要么使用本地IP地址。

>

这只有在你使用Android6.0时才有效。要使用ADB转发端口，请在终端中运行以下命令：

adb reverse tcp:8163 tcp:8163

这将把您的本地8163端口映射到手机的8163端口。您将能够通过这种方式访问您的开发服务器。

使用本地IP地址

您还可以在React Native development应用程序上使用您的本地IP重新加载它们，而无需USB。摇动您的设备或长按菜单按钮打开开发者菜单。打开Dev Settings，然后点击Debug server host

你应该很乐意接受这个。