如何在React Native应用中跳转至Instagram分享页面？

前置配置 #

iOS端配置 #

需要在项目的ios/[项目名]/Info.plist文件中，添加Instagram的scheme白名单，否则系统会判定为未注册的scheme无法跳转：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>instagram</string>
</array>

安卓端配置 #

针对安卓12及以上版本的应用可见性限制，需要在android/app/src/main/AndroidManifest.xml中添加queries配置：

<queries>
  <package android:name="com.instagram.android" />
</queries>

核心功能实现 #

直接使用React Native官方自带的LinkingAPI调用Instagram的原生分享scheme即可，不需要传递任何文本、媒体相关的参数，即可唤起空白的分享编辑页让用户自主操作：

import { Linking, Alert } from 'react-native';

const openInstagramShare = async () => {
  const instagramScheme = 'instagram://share';
  // 先判断设备是否安装Instagram
  const canOpen = await Linking.canOpenURL(instagramScheme);
  if (canOpen) {
    await Linking.openURL(instagramScheme);
  } else {
    Alert.alert('提示', '您尚未安装Instagram应用');
  }
};

需要使用分享功能的位置直接调用openInstagramShare()方法即可。

注意事项 #

• 如果需要适配未安装Instagram的场景，可以自定义跳转应用商店的逻辑，替换上面的Alert提示即可
• 不要在scheme后拼接caption、media等附加参数，即可保证唤起的是无预设内容的空白分享页
• 配置修改后需要重新打包运行才会生效，热更新不会修改原生配置文件

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