使用Expo SDK构建的React-Native应用程序将照片分享到Instagram

Question

我希望我的本机应用程序与Instagram共享照片.我知道用本机代码编写打开带有指定照片的Instagram过滤器屏幕是可能的.一个限制是我正在使用Expo SDK,它不允许'npm link'用于本机依赖项.

调用此函数时,它将打开Instagram:

  _handlePress = () => {
    Linking.openURL('instagram://app');
  }

这是按钮:

   <Button 
      onPress={this._handlePress}
      title='Open Instagram'
    />

图像存储在以下状态:

  state = {
    image: null,
    uploading: false
  }

我可以在Image标签中显示图像就好了:

<Image
  source={{uri: image}}
  style={{width: 300, height: 300}}
 />

但是,我无法将图像传递给Instagram.以下是一些失败的研究:第三方库:react-native-instagram-share:https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

因为我不能使用'link'来使用本机依赖项.我正在使用Expo SDK,它不允许"链接"用于本机依赖项.

Instagram文档解释了如何打开Instagram,并且传递图像可以使用本机代码完成.其中,是使用"UIDocumentInteractionController",这在JavaScript中不可用.
https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

我的问题没有任何其他Stackoverflow答案.

Answer 1

我把一个你可以在iOS上运行的例子放在一起:https://snack.expo.io/rkbW-EG7-

完整代码如下:

import React, { Component } from 'react';
import { Linking, Button, View, StyleSheet } from 'react-native';
import { ImagePicker } from 'expo';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Button title="Open camera roll" onPress={this._openCameraRoll} />
      </View>
    );
  }

  _openCameraRoll = async () => {
    let image = await ImagePicker.launchImageLibraryAsync();
    let { origURL } = image;
    let encodedURL = encodeURIComponent(origURL);
    let instagramURL = `instagram://library?AssetPath=${encodedURL}`;
    Linking.openURL(instagramURL);
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
});

这将让您打开相机胶卷并选择图像,然后打开Instagram应用程序并选择该图像.如果图像尚未在相机胶卷上,则可以CameraRoll.saveToCameraRoll在图像上使用(链接到React Native文档)以获取它.

此示例中使用的方法仅在您从相机胶卷共享时可以正常工作,但是,我不确定如何在Android上执行此操作.我在Expo的功能请求板上提出了一个问题,以确保Instagram共享开箱即用.

Answer 2

以下是如何从远程 URL 共享文件：首先下载它！:)

  const downloadPath = FileSystem.cacheDirectory + 'fileName.jpg';
  // 1 - download the file to a local cache directory
  const { uri: localUrl } = await FileSystem.downloadAsync(remoteURL, downloadPath);
  // 2 - share it from your local storage :)
  Sharing.shareAsync(localUrl, {
    mimeType: 'image/jpeg',            // Android
    dialogTitle: 'share-dialog title', // Android and Web
    UTI: 'image/jpeg'                  // iOS
  });