React Native android 应用程序在应用商店上传时引发网络错误

Question

我正在开发一个应用程序，该应用程序用于在全国范围内获取 Tenders 数据。我正在使用 axio 发布和获取数据，一切正常。我已经生成了 Apk 并在模拟器和 Bluestaks 上对其进行了测试，但是当我昨天发布应用程序时，应用程序开始在登录页面上抛出网络错误。这是我第一次收到错误，现在我被严重卡住了。

请有人帮助我

我的 package.json 文件是依赖项

"dependencies": {
"axios": "^0.19.0",
"firebase": "^5.11.1",
"native-base": "^2.12.1",
"react": "16.8.6",
"react-native": "0.60.3",
"react-native-elements": "^0.19.1",
"react-native-image-picker": "^1.0.1",
"react-native-router-flux": "^4.0.6",
"react-native-vector-icons": "^6.6.0",
"react-redux": "^5.1.0",
"redux": "^4.0.1"

},

节点版本为 10.16.0 react-native-cli: 2.0.1

我的登录页面代码在这里

sendApicall(username,me)
{
    debugger;
    const { REST_API } = config;
    var me = this;
    //const {username,password} = this.state;// {username:"arsalankhan@gmail.com",password:"0346asdff"};
    me.setState({isLoading:true});

    let apiconfig = {
        headers: {
        'Content-Type': 'application/json; charset=UTF-8'
    }};

    axios.post(REST_API.Tenders.Login,
        {
          "PhoneNumber":username,
            "Email":username,
            "Password": "xxxxxxxx"
        },apiconfig).then(response => {
            if(response.data.success)
            {                                    
                me.setState({isLoading:false});
                const baseModel = response.data;
                var orgid = baseModel.orgid;   
                var userData = baseModel.userData;   
              Actions.newSplash({UserCompany:baseModel.data,orgid,UserData:userData});
            }else
            { 
                me.setState({isLoading:false});
                me.showAlertError("Login Falied");

            }

      }).catch(error => {
        me.setState({isLoading:false});
        me.showAlertError("Error"+ error.message);
        console.log("error", error)        
      });
}

我的 AndroidManifest.xml 文件是

<manifest xmlns:android="http://schemas.android.com/apk/res/android">

  <uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:allowBackup="false"
  android:theme="@style/AppTheme">
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
    android:windowSoftInputMode="adjustResize">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
  <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>

我们将非常感谢您的帮助

Answer 1

我猜您正在尝试访问 HTTP 协议来访问 API。从 Android 9（我再次假设您正在使用）开始，如果不配置对“CLEARTEXT 流量”的访问权限，您将无法访问 HTTP

修复/解决方法的步骤：

在你的 android 项目中添加一个 xml 文件 -> /project_root/android/app/src/main/res/xml （如果没有 xml 文件夹，只需添加一个）。

然后在其中添加一个名为network_security_config.xml的xml

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

然后在您的 AndroidManifest.xml 中添加您的 <application> 节点，不要复制 ... 只需添加 android: 部分：

<application
  ...
  android:networkSecurityConfig="@xml/network_security_config"   
 >

希望能为您解决问题。

顺便说一句，也许考虑迁移到 HTTPS，那么您就不必这样做了！