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

问题描述

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.

When this function is called, it will open Instagram:

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

This is the Button:

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

The image is stored in the state:

  state = {
    image: null,
    uploading: false
  }

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

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

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/

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.

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/

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

解决方案

I put together an example that you can run on iOS here: https://snack.expo.io/rkbW-EG7-

Full code below:

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

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.

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屋！