Question

我在Android模拟器上运行React Native应用程序，但是发现网络无法正常工作，我在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（），我只在控制台中看到'fetch ...'，甚至看不到response.status，并且catch没有错误。

通过调用useXMLHttpRequest（），我看到request.readyState为1。

感谢您的帮助

Answer 1

您可能应该给此异步日志一个更明确的消息，以便在其他日志中找到该特定消息，例如：

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

我试图重现您的问题，但是不能，它可以在我的Android模拟器上正常工作。您能否共享控制台日志？

一种解决方法是使用 @ react-native-community / netinfo 库来确定您是否可以访问Internet。

当心，这可能会很慢。

此库为侦听器提供连接详细信息更改。获取连接详细信息可能会很慢...您将不得不在实际设备上对其进行测试，以确定此解决方法是否有效。

基于您的源代码的快速演示：

    [...]
    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 && 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) {
    [...]

React Native Android网络不起作用

1 个答案: