在 React JS 移动应用上分享答案

【问题标题】：Sharing on React JS Mobile application在 React JS 移动应用上分享
【发布时间】：2021-09-12 14:12:20
【问题描述】：

我正在尝试让我的应用程序允许共享到其他应用程序，但我似乎无法弄清楚。

我正在使用 React JS 并尝试使用以下代码

        // Check if navigator.share is supported by the browser
        if (navigator.share) {
            console.log("Congrats! Your browser supports Web Share API");
            navigator
                .share({
                    url: "https://www.google.com",
                    text: "add text",
                    title: "Your Discovery",
                })
                .then(() => {
                    console.log("Sharing successfull");
                })
                .catch(() => {
                    console.log("Sharing failed");
                });
        } else {
            console.log("Sorry! Your browser does not support Web Share API");
        }
    };

我收集到这不适用于我的应用程序，因为它不受支持的浏览器类型。但是想知道如果我通过我的应用程序启动应用程序内浏览器是否可以工作？

或者有谁知道如何将本机共享功能添加到 react js 应用程序。

谢谢。

【问题讨论】：

您是否在真实设备浏览器（智能手机）中尝试过？我想这应该在这种情况下工作

标签： android reactjs web-share

【解决方案1】：

这仅在少数浏览器上受支持。即使您使用浏览器组件，应用程序也会尝试打开可能不支持此功能的默认浏览器。以下是此功能的浏览器兼容性。 Android 和 iPhone 可以正常工作，因为它有支持。

【讨论】：

【解决方案2】：

这就是我解决问题的方法！我的应用是使用 ionic 和 react js 构建的，这是唯一适用于本机设备的解决方案。

 import { Share } from '@capacitor/share';
    
    const [basicShare, setBasicShare] = useState(false)
    
    
    useEffect(() => () => {
            if (basicShare) {
                Share.share({
                    title: 'Title',
                    text: 'enter text',
                    url: "https://google.com",
                    dialogTitle: 'Share',
                });
            }
            setBasicShare(false)
    
        },
            [basicShare]);

【讨论】：