React Native安卓应用无法正常打开Google Docs网页链接问题

问题描述 #

开发的React Native应用包含多类网站链接，安卓端点击Google Docs链接时出现异常：

• 通过Docs应用打开提示：Document lookup failed. It is possible the document was deleted.
• 通过Chrome打开提示：Sorry, the file you have requested does not exist.
  但将链接直接粘贴到Chrome地址栏可正常显示文档。

代码与配置信息 #

链接实现代码 #

import { Linking } from 'react-native';

const onPress = async () => {
    let link = url.toLowerCase();
    if (!/^https?:\/\//.test(link) && !/^mailto:/.test(link)) {
        link = `https://${link}`;
    }
    Linking.openURL(link);
};

Android Manifest配置 #

<manifest ...>
    ...
    <uses-permission android:name="android.permission.INTERNET" />
    ...
    <queries>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="https"/>
        </intent>
        <intent>
            <action android:name="android.intent.action.VIEW" />
            <data android:scheme="http"/>
        </intent>
    </queries>
</manifest>

版本信息 #

• react-native: 0.66.5
• minSdkVersion = 21
• compileSdkVersion = 33
• targetSdkVersion = 33

问题原因 #

Google Docs链接中的文档ID是大小写敏感的，代码中对整个链接执行toLowerCase()操作，会修改文档ID的大小写，导致链接失效，无法匹配到正确的文档。

解决方案 #

修改链接处理逻辑，移除对整个URL的大小写转换，仅在需要补充协议时处理：

import { Linking } from 'react-native';

const onPress = async () => {
    let link = url;
    // 仅当链接无http/https协议且不是mailto时，添加https前缀
    if (!/^https?:\/\//.test(link) && !/^mailto:/.test(link)) {
        link = `https://${link}`;
    }
    // 可选：添加错误处理，提升异常排查能力
    try {
        const isSupported = await Linking.canOpenURL(link);
        if (isSupported) {
            await Linking.openURL(link);
        } else {
            console.error('当前设备不支持打开该链接');
        }
    } catch (error) {
        console.error('打开链接失败:', error);
    }
};

额外说明 #

• Android Manifest中的<queries>配置已经正确支持http/https链接的跳转，无需修改。
• 多数服务的URL路径、参数存在大小写敏感情况，避免对整个URL执行大小写转换操作。

内容的提问来源于stack exchange，提问作者Tyla Evans