React Native中Linking真机无法打开URL但模拟器正常的问题

我需要在设备浏览器中打开支付链接，实现代码如下：

const handlePaySubmit = async () => {
  const formData = new FormData();
  formData.append(
    'api',
    '**********',
  );
  formData.append('amount', Number(String(tuitionPrice) + '0'));
  formData.append('redirect', 'https://gymtracker.ir/tuitionPayment');

  axios({
    method: 'post',
    url: 'https://bitpay.ir/payment-test/gateway-send',
    data: formData,
  })
    .then(function (response) {
      if (typeof response.data === 'number' && response.data > 0) {
        const paymentUrl = `https://bitpay.ir/payment-test/gateway-${response.data}-get`;

        // Opening the URL
        Linking.canOpenURL(paymentUrl).then(urlResponse => {
          if (urlResponse) {
            Linking.openURL(paymentUrl);
          }
        });
      }
    })
    .catch(error => {
      console.log(error);
    });
}

这段代码在Android模拟器的Chrome浏览器中运行正常，但执行assembleDebug打包后在真机上无法生效。尝试修改Debug文件夹下的AndroidManifest.xml为以下内容后，出现> Task :app:processDebugResources FAILED编译错误：

<application
    android:usesCleartextTraffic="true"
    tools:targetApi="28"
    tools:ignore="GoogleAppIndexingWarning">
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
    <intent>
        <action android:name="android.intent.action.VIEW" />
        <data android:scheme="https"/>
    </intent>
</application>

问题分析与解决方案 #

1. 修复AndroidManifest.xml的错误配置

直接把<intent>放在<application>标签下不符合Android配置规范，<intent>必须嵌套在<activity>的<intent-filter>内部，这是导致编译失败的直接原因。正确配置需给主Activity添加支持外部链接的intent-filter：

<application
    android:usesCleartextTraffic="true"
    tools:targetApi="28"
    tools:ignore="GoogleAppIndexingWarning">
    <!-- 主Activity配置 -->
    <activity 
        android:name=".MainActivity"
        android:exported="true"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustResize">
        <!-- 原有启动页intent-filter -->
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
        <!-- 添加支持外部链接的intent-filter -->
        <intent-filter>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.DEFAULT" />
            <category android:name="android.intent.category.BROWSABLE" />
            <!-- 匹配https协议的链接 -->
            <data android:scheme="https" />
        </intent-filter>
    </activity>
    <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" android:exported="false" />
</application>

2. 适配Android 11及以上版本的应用查询权限

Android 11（API 30）及以上版本限制了应用对其他应用的查询，需在<manifest>根标签内添加queries声明，允许应用查询外部浏览器：

<manifest ...>
    <!-- 其他配置 -->
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <category android:name="android.intent.category.BROWSABLE" />
            <data android:scheme="https" />
        </intent>
    </queries>
    <!-- application标签 -->
</manifest>

3. 优化JS代码的稳定性

原代码中Linking.canOpenURL在部分真机环境存在兼容性问题，建议直接尝试打开链接并添加错误捕获，同时改用async/await简化代码：

import { Alert } from 'react-native';

const handlePaySubmit = async () => {
  const formData = new FormData();
  formData.append('api', '**********');
  formData.append('amount', Number(String(tuitionPrice) + '0'));
  formData.append('redirect', 'https://gymtracker.ir/tuitionPayment');

  try {
    const response = await axios({
      method: 'post',
      url: 'https://bitpay.ir/payment-test/gateway-send',
      data: formData,
    });
    
    if (typeof response.data === 'number' && response.data > 0) {
      const paymentUrl = `https://bitpay.ir/payment-test/gateway-${response.data}-get`;
      try {
        await Linking.openURL(paymentUrl);
      } catch (openError) {
        console.error('无法打开支付链接:', openError);
        Alert.alert('提示', '无法自动打开浏览器，请手动复制链接：' + paymentUrl);
      }
    }
  } catch (error) {
    console.error('请求支付网关失败:', error);
    Alert.alert('错误', '支付请求失败，请稍后重试');
  }
};

4. 重新打包测试

完成以上修改后，执行命令重新打包：

./gradlew assembleDebug

将生成的APK安装到真机后测试支付链接是否能正常打开。

内容的提问来源于stack exchange，提问作者Ali Bahaari