如何从Expo / React Native将图片分享到Instagram故事

Question

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

对于iOS的普通Instagram帖子，此问题已经been solved，但对于故事而言却没有。

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',
  },
});

Answer 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,
})