如何从 Expo / React Native 将图像分享到 Instagram 故事答案

【问题标题】：How to share an image to Instagram Stories from Expo / React Native如何从 Expo / React Native 将图像分享到 Instagram 故事
【发布时间】：2019-11-08 19:04:13
【问题描述】：

如何使用 Expo / React Native 将图像直接分享到 Instagram 快拍？

这个问题已经 been solved 用于 iOS 的普通 Instagram 帖子，但不是故事。

Facebook 的 docs 解释了如何在 iOS 和 Android 上执行此操作，而不是 React Native。

预期行为：

使用所选图片打开 Instagram 快拍。

当前行为：

以空白屏幕打开 Instagram 快拍。

我面临的问题：

我不太确定如何生成适合 Instagram 架构的 URI，正如他们的 docs 中所引用的那样。

可重复的零食

https://snack.expo.io/@nandorojo/share-to-instagram-story

非常感谢！

这是我上面点心的代码：


import * as React from 'react';
import { Text, View, StyleSheet, Linking, Image } from 'react-native';
import * as FileSystem from 'expo-file-system';

const url = 'https://source.unsplash.com/daily';

export default class App extends React.Component {
  _shareToStory = async () => {
    // download to device
    const { uri } = await FileSystem.downloadAsync(
      url,
      `${FileSystem.documentDirectory}meme.jpg`
    ).catch(e => console.log('instagram share failed', JSON.stringify(e), url));

    try {
      const encodedUrl = encodeURIComponent(uri);
      const instagramUrl = `instagram-stories://share?backgroundImage=${encodedUrl}`;
      Linking.openURL(instagramUrl);
    } catch (error) {
      console.log(error);
    }
  };
  render() {
    return (
      <View style={styles.container}>
        <Image source={{ uri: url }} style={{ height: 100, width: 100 }} />
        <Text style={styles.paragraph} onPress={this._shareToStory}>
          Share to Instagram Story
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

【问题讨论】：

标签： react-native expo

【解决方案1】：

如果您使用 Expo Managed Workflow，您的选择将非常有限。从 SDK v38 开始，afaik 只能在 Android 上完成此操作，并且只有在您共享 背景图片 时（由于缺少用于内容权限和粘贴板的 Expo API )，那么这样的事情可能会起作用：

import * as FileSystem from 'expo-file-system'
import * as IntentLaucher from 'expo-intent-launcher'

// url of the file to share
const url = '....'

// some random temporary filename
const localFile = `${FileSystem.cacheDirectory}${uuid()}.jpg`

try {
  FileSystem.downloadAsync(url, localFile)
    .then(({ uri }) => {
      FileSystem.getContentUriAsync(uri).then(contentUri => {
        IntentLauncher.startActivityAsync(
          'com.instagram.share.ADD_TO_STORY',
          {
            data: contentUri,
            flags: 1, // FLAG_GRANT_READ_URI_PERMISSION
            type: 'image/jpeg', // or other based on your file type
          }
        ).catch(console.warn)
      })
    })
    .catch(console.warn)
} finally {
  FileSystem.deleteAsync(localFile).catch(console.warn)
}

但是，如果您使用的是 React Native（或已弹出到 Expo Bare Workflow），那么您有更多选择。我建议使用 RN 社区支持的 react-native-share 库，该库可在 Android 和 iOS 上运行并支持所有共享选项（以及许多其他服务）：

import Share from 'react-native-share'

Share.shareSingle({
  method: Share.InstagramStories.SHARE_BACKGROUND_IMAGE,
  backgroundImage: '....' // url of the file to share
  social: Share.Social.INSTAGRAM_STORIES,
})

【讨论】：