从使用Expo SDK构建的React-Native应用程序将照片共享到Instagram [英] Share photo to Instagram from React-Native app built with Expo SDK

问题描述

我希望我的本机应用程序可以与Instagram分享照片.我知道在编写本机代码时可以使用指定的照片打开Instagram的筛选器屏幕.限制是我使用的是Expo SDK，它不允许本地依赖项使用"npm链接".

I want my react-native app to share a photo with Instagram. I know it's possible when writing in native code to open up Instagram's filter screen with a specified photo. A restriction is that I'm using the Expo SDK, which doesn't allow 'npm link' for native dependencies.

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

When this function is called, it will open Instagram:

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

这是按钮:

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

图像以以下状态存储:

  state = {
    image: null,
    uploading: false
  }

我可以在Image标签中显示该图像:

I can display the image in an Image tag just fine:

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

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

But, I have no way passing the image along to Instagram. Here is some failed research: Third party libraries: react-native-instagram-share: https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

因为我无法使用链接"来使用本地依赖项.我正在使用Expo SDK，该SDK不允许为本地依赖项提供链接".

Because I can’t use ‘link’ to use native dependencies. I am using the Expo SDK which doesn’t allow the ‘link’ for native dependencies.

Instagram文档解释了如何打开Instagram，并且可以使用本机代码来传递图像.可以使用JavaScript中没有的"UIDocumentInteractionController".
https://www.instagram.com/developer/mobile-sharing/iphone -hooks/

The Instagram docs explain how to open Instagram, and that passing the image along can be done with native code. Which, is to use "UIDocumentInteractionController", which isn’t available in JavaScript.
https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

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

There aren't any other Stackoverflow answers to my question.

推荐答案

我在此处整理了一个可以在iOS上运行的示例: https://snack.expo.io/rkbW-EG7-

I put together an example that you can run on iOS here: 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文档)以获取该链接.

This will let you open up your camera roll and pick an image, then open the Instagram app with that image selected. If the image isn't already on the camera roll, then you can use CameraRoll.saveToCameraRoll on the image (link to React Native documentation) to get it there.

本示例中使用的方法仅在您可以从相机胶卷共享的情况下才有效，但是我不确定如何在Android上执行此操作.我

The approach used in this example will only work if you are OK with sharing from the camera roll, however, and I am unsure about how to do this on Android. I made an issue on Expo's feature request board to make sure that Instagram sharing works great out of the box.

这篇关于从使用Expo SDK构建的React-Native应用程序将照片共享到Instagram的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！