Блог

Я запускаю приложение React Native на эмуляторе Android, но обнаружил, что сеть не работает, я запускаю ее на iOS, она работает нормально. Вот простой код:

 import React from 'react';
import {StyleSheet, View, Text} from 'react-native';

export default () => {
  React.useEffect(() => {
    const useFetch = async () => {
      try {
        console.log('fetch ...');
        let response = await fetch('https://mytestdomain.com');
        console.log(response.status);
        // let json = await response.json();
      } catch (error) {
        console.log(error);
      }
    };
    useFetch();

    const useXMLHttpRequest = async () => {
      try {
        var request = new XMLHttpRequest();
        request.onreadystatechange = (e) => {
          if (request.readyState !== 4) {
            console.log(request.readyState);
            return;
          }

          if (request.status === 200) {
            console.log('success', request.responseText);
          } else {
            console.warn('error');
          }
        };

        request.open('GET', 'https://mytestdomain.com');
        request.send();

      } catch (error) {
        console.log(error);
      }
    };
    useXMLHttpRequest();
  }, []);

  return (
    <View style={styles.layout}>
      <Text>React Native Android networking</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  layout: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});
  

По вызову useFetch() Я просто вижу «выборку …» в консоли, даже не вижу response.status, и ошибки от catch нет.

По вызову useXMLHttpRequest() Я вижу request.readyState равно 1.

Заранее спасибо за любую помощь

Вероятно, вам следует предоставить этому асинхронному журналу более явное сообщение, чтобы найти это конкретное сообщение среди других журналов, например :

 console.log("RS : "   response.status);
  

Я попытался воспроизвести вашу проблему, и я не могу, она отлично работает на моем симуляторе Android.
Не могли бы вы поделиться своими журналами консоли?

Обходной путь заключается в использовании библиотеки @react-native-community / netinfo, чтобы определить, есть ли у вас доступ в Интернет или нет.

Будьте осторожны, это может быть медленно.

Эта библиотека предоставляет слушателю изменения сведений о соединении. Получение сведений о подключении может быть медленным… вам нужно будет протестировать его на реальных устройствах, чтобы определить, является ли этот обходной путь эффективным или нет.

Быстрая демонстрация на основе вашего исходного кода :

     [...]
    import { StyleSheet, View, Text } from "react-native";
     import NetInfo from "@react-native-community/netinfo";
    
    export default () => {
    -  React.useEffect(() => {
       NetInfo.addEventListener((netInfo) => {
        const useFetch = async () => {
        try {
    -        console.log("fetch ...");
    -        let response = await fetch("https://mytestdomain.com");
    -        console.log(response.status);
    -        // let json = await response.json();
             // Just because there is a connection, it does not mean that internet is accessible, so test both isConnected and isInternetReachable
             if (netInfo.isConnected amp;amp; netInfo.isInternetReachable) {
               console.log("fetch ...");
               let response = await fetch(
                 "https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch"
               );
               console.log("start 1");
               console.log("success 1", response.status);
               console.log("stop 1");
             } else {
               console.log("internet is not ready");
             }
        } catch (error) {
    [...]