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

Question

我希望我的 react-native 应用程序与 Instagram 分享照片。 我知道在编写本机代码时可以使用指定的照片打开Instagram的滤镜屏幕。 一个限制是我使用的是 Expo SDK，它不允许本机依赖项的"npm 链接"。

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

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

这是按钮：

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

图像以以下状态存储：

state = {
image: null,
uploading: false
}

我可以很好地在图像标签中显示图像：

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

但是，我没有办法将图像传递给Instagram。 以下是一些失败的研究： 第三方库： React-native-instagram-share： https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

因为我不能使用"链接"来使用本机依赖项。我正在使用世博会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 上执行此操作。我在世博会的功能请求板上提出了一个问题，以确保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
});

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

Answer 4

为我工作:)

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