React native Android connect backend service at localhost

Question

J'ai un service de registre qui est géré par Nodejs. Ce service fonctionne sur le port 3001. J'essaie de connecter ce service à partir de l'application React Native. Mais il retourne toujours

ReactNativeJS : [TypeError : Network request failed] (Erreur de type : échec de la requête réseau)

Le code de mon composant et de mon package.json se trouve ci-dessous. J'ai également remplacé l'URL localhost par 127.0.0.1 et cela ne fonctionne pas. Le service backend fonctionne correctement lorsque je le teste depuis Postman. Il donne une exception très commune Network Error, il est donc très difficile de comprendre la racine du problème. Tout développeur React Native débutant peut facilement faire face à ce problème. Le problème vient-il de React Native ou d'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'
    }
});

Package.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"
  }
}

Answer 1

Il pourrait y avoir deux cas de figure pour tester ce problème.

1. Utiliser le dispositif
2. Utiliser l'émulateur

Le point clé est l'exécution de la commande suivante

$adb reverse tcp:3001 tcp:3001

TEMPLATE : adb reverse tcp:{APPLICATIONPORT} tcp:{APPLICATIONPORT}

Dans le premier cas, ipconfig à l'intérieur du PC permet de trouver l'adresse IP locale comme suit 192.168.1.4 . Votre url devrait ressembler à http://192.168.1.4:3001/user/register

Si vous utilisez l'émulateur, vous devez utiliser l'url suivante http://10.0.2.2:3001/user/register

Ces URL ont fonctionné pour moi, après avoir exécuté la commande adb reverse.

Answer 2

ifconfig | grep "192.168"

le premier est celui que vous devez viser