在 localhost 反应原生 android 连接后端服务

Posted 2023-03-15

技术标签:

【中文标题】在 localhost 反应原生 android 连接后端服务【英文标题】：React native android connect backend service at localhost 【发布时间】：2018-03-10 07:22:35 【问题描述】：

我有一个由 Nodejs 处理的注册服务。该服务在 3001 端口上运行。我尝试从 React Native 应用程序连接此服务。但总是返回

ReactNativeJS: [TypeError: 网络请求失败]

我的组件和 package.json 代码如下。另外，我将 URL localhost 替换为 127.0.0.1 并且它不起作用。当我从 Postman 测试后端服务时，它工作正常。给出非常常见的异常网络错误，因此很难理解问题的根源。每个 React Native 开发初学者都可以轻松面对这个问题。那么问题是由 React Native 还是 android 引起的？

import React,  Component  from 'react';
import 
    TextInput,
    ScrollView,
    Alert,
    TouchableHighlight,
    Text,
    StyleSheet
 from 'react-native';

export default class Register extends Component 
    constructor(props) 
        super(props);
        this.onPress = this.onPress.bind(this);
    

componentDidMount() 
    this.state = 
        email: '',
        password: '',
        passwordRepetition: '',
        error: '',
        loading: false
    ;


onPress() 
    fetch('http://127.0.0.1:3001/user/register', 
        method: 'POST',
        headers: 
            Accept: 'application/json',
            'Content-Type': 'application/json',
        ,
        body: JSON.stringify(
            email: this.state.email,
            password: this.state.password,
        ),
    ).then(res => 
        console.log(res);
    )
        .catch(err => 
            console.log(err);
        );


render() 
    return (
        <ScrollView>
            <TextInput
                style= height: 40 
                placeholder="type@email.com"
                onChangeText=email => this.setState( email )
            />
            <TextInput
                style= height: 40 
                placeholder="veryhardpassword"
                secureTextEntry
                onChangeText=password => this.setState( password )
            />
            <TextInput
                style= height: 40 
                placeholder="repetition of password"
                secureTextEntry
                onChangeText=passwordRepetition =>
                    this.setState( passwordRepetition )
                
            />
            <TouchableHighlight style=styles.button onPress=this.onPress>
                <Text> Touch Here </Text>
            </TouchableHighlight>
        </ScrollView>
    );



const styles = StyleSheet.create(
    container: 
        flex: 1,
        justifyContent: 'center',
        paddingHorizontal: 10
    ,
    button: 
        alignItems: 'center',
        backgroundColor: '#DDDDDD',
        padding: 10
    ,
    countContainer: 
        alignItems: 'center',
        padding: 10
    ,
    countText: 
        color: '#FF00FF'
    
);

包.json


  "name": "mobile",
  "version": "0.0.1",
  "private": true,
  "scripts": 
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  ,
  "dependencies": 
    "react": "16.3.0-alpha.1",
    "react-native": "^0.54.0"
  ,
  "devDependencies": 
    "babel-jest": "22.4.1",
    "babel-preset-react-native": "4.0.0",
    "eslint": "^4.18.2",
    "eslint-plugin-react": "^7.7.0",
    "jest": "22.4.2",
    "react-test-renderer": "16.3.0-alpha.1"
  ,
  "jest": 
    "preset": "react-native"

【问题讨论】：

你使用的是模拟器还是设备我都试过了如果您可以在浏览器中查看它，请检查您的电脑是否可以访问，然后尝试使用您的应用程序连接到它 【参考方案1】：

可能有 2 个案例来测试这个问题。

使用设备使用模拟器

关键点在命令下方运行