从使用 Expo SDK 构建的 React-Native 应用程序将照片分享到 Instagram
Share photo to Instagram from React-Native app built with Expo SDK
我想让我的本机反应应用程序与 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,它不允许“link”用于本机依赖项。
Instagram 文档解释了如何打开 Instagram,并且可以使用本机代码来传递图像。其中,是使用“UIDocumentInteractionController”,它在 JavaScript.
中不可用
https://www.instagram.com/developer/mobile-sharing/iphone-hooks/
我的问题没有任何其他 Whosebug 答案。
我在这里整理了一个示例,您可以在 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 应用。如果图像还没有在相机胶卷上,那么您可以在图像 (link to React Native documentation) 上使用 CameraRoll.saveToCameraRoll
来获取它。
此示例中使用的方法只有在您同意从相机胶卷共享时才有效,但是,我不确定如何在 Android 上执行此操作。我 made an issue on Expo's feature request board 以确保 Instagram 分享开箱即用。
你是这样的post
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);
}
这是从远程共享文件的方法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
});
为我工作:)
onClick = () => {
ImagePicker.launchImageLibrary(options, response =>{
console.log(response);
let instagramURL = `instagram://library?LocalIdentifier=`+response.origURL;
Linking.openURL(instagramURL);
})
我想让我的本机反应应用程序与 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,它不允许“link”用于本机依赖项。
Instagram 文档解释了如何打开 Instagram,并且可以使用本机代码来传递图像。其中,是使用“UIDocumentInteractionController”,它在 JavaScript.
中不可用
https://www.instagram.com/developer/mobile-sharing/iphone-hooks/
我的问题没有任何其他 Whosebug 答案。
我在这里整理了一个示例,您可以在 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 应用。如果图像还没有在相机胶卷上,那么您可以在图像 (link to React Native documentation) 上使用 CameraRoll.saveToCameraRoll
来获取它。
此示例中使用的方法只有在您同意从相机胶卷共享时才有效,但是,我不确定如何在 Android 上执行此操作。我 made an issue on Expo's feature request board 以确保 Instagram 分享开箱即用。
你是这样的post
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);
}
这是从远程共享文件的方法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
});
为我工作:)
onClick = () => {
ImagePicker.launchImageLibrary(options, response =>{
console.log(response);
let instagramURL = `instagram://library?LocalIdentifier=`+response.origURL;
Linking.openURL(instagramURL);
})