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

Posted 2023-03-15

【中文标题】从使用 Expo SDK 构建的 React-Native 应用程序将照片分享到 Instagram

【英文标题】：Share photo to Instagram from React-Native app built with Expo SDK

【发布时间】：2017-11-19 21:07:37

【问题描述】：

我希望我的 react-native 应用与 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/

因为我不能使用“链接”来使用本机依赖项。我正在使用 Expo SDK，它不允许本地依赖项的“链接”。

Instagram 文档解释了如何打开 Instagram，并且可以使用本机代码来传递图像。即使用“UIDocumentInteractionController”，这在 javascript 中是不可用的。https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

我的问题没有任何其他 *** 答案。

【问题讨论】：

我认为 Share API 不能专门针对 Instagram。

【参考方案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 (link to React Native documentation) 将其移至那里。

此示例中使用的方法仅适用于您可以通过相机胶卷进行共享，但我不确定如何在 android 上执行此操作。我made an issue on Expo's feature request board 确保 Instagram 分享开箱即用。

【讨论】：

这正是我所需要的。我实际上添加了CameraRoll.saveToCameraRoll，效果很好。由于您必须使用本地文件，因此我需要提出一个 Android 解决方案。

docs.expo.io/versions/latest/sdk/intent-launcher.html 可以用于 Android，@brentvatne 吗？

你是如何获得 Instagram 的 URL，@brentvatne？这里没有记录：instagram.com/developer/mobile-sharing/iphone-hooks。此外，任何有关如何在 Android 上执行此操作的提示也将不胜感激

为我工作 :) onClick = () => ImagePicker.launchImageLibrary(options, response => console.log(response); let instagramURL = instagram://library?LocalIdentifier=+response.origURL; 链接。 openURL(instagramURL); )

知道如何为 android 实现这一点吗？

【参考方案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
  );

【讨论】：

Sharing.shareAsync 打开一般系统共享对话框，而不是直接打开这个问题中询问的 Instagram 应用程序。

@PetrBela 重点在第一部分——先下载文件的想法。但是，我不会编辑这个答案。我写它已经很长时间了，没有时间编写和测试我需要编写的代码。谢谢你的想法。我希望我的回答对某人有所帮助。

【参考方案3】：

这是你发帖的方式

import  CameraRoll  from 'react-native'

callThisFunction = async () => 
      await CameraRoll.saveToCameraRoll("https://images.unsplash.com/photo-1504807417934-b7fdec306bfd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80", 'photo');
      let instagramURL = `instagram://library?AssetPath=null`;
      Linking.openURL(instagramURL);
  

【讨论】：

欢迎来到 Stack Overflow！提问前请阅读what this site is about 和“How to ask”。

欢迎来到 Stack Overflow！提问前请阅读what this site is about 和“How to ask”。

这对我有用 - 这里的关键见解是 instagram 只是打开最后保存的照片等......不确定它是否适用于 android。 - 我也有点担心这不在他们的电话挂钩文档等中......

【参考方案4】：

为我工作:)

onClick = () => 
  ImagePicker.launchImageLibrary(options, response =>
    console.log(response);
    let instagramURL = `instagram://library?LocalIdentifier=`+response.origURL;
    Linking.openURL(instagramURL);
  )