Teilen Sie ein Foto von React-Native App mit dem Expo SDK in Instagram.

Question

Ich möchte, dass meine reagierende native App ein Foto mit Instagram teilt. Ich weiß, dass es möglich ist, beim Schreiben in nativem Code den Filterbildschirm von Instagram mit einem bestimmten Foto zu öffnen. Eine Einschränkung ist, dass ich das Expo SDK verwende, das 'npm link' für native Abhängigkeiten nicht erlaubt.

Wenn diese Funktion aufgerufen wird, wird es Instagram öffnen:

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

Dies ist der Button:

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

Das Bild in dem Zustand gespeichert ist:

state = { 
    image: null, 
    uploading: false 
    } 

I kann das Bild in einem Bild Tag ganz gut anzeigen:

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

Aber ich habe keine Möglichkeit, das Bild an Instagram weiterzuleiten. Hier sind einige gescheitert Forschung: Third-Party-Bibliotheken: reagieren-native-instagram-Aktie: https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

Weil ich nicht ‚link‘ verwenden können nativen Abhängigkeiten zu verwenden. Ich verwende das Expo-SDK, das den "Link" für native Abhängigkeiten nicht erlaubt.

Die Instagram-Dokumentation erklärt, wie Instagram geöffnet wird und dass die Weitergabe des Bildes mit nativem Code erfolgen kann. Was ist, "UIDocumentInteractionController" zu verwenden, der in JavaScript nicht verfügbar ist.
https://www.instagram.com/developer/mobile-sharing/iphone-hooks/

Es gibt keine anderen Stackoverflow Antworten auf meine Frage.

Answer 1

ich zusammen ein Beispiel, das Sie auf iOS hier laufen können: https://snack.expo.io/rkbW-EG7-

Voll Code unten:

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

Damit können Sie Ihre Kamera rollen öffnen und ein Bild auswählen, dann öffnen die Instagram App mit diesem Bild ausgewählt. Wenn das Bild nicht bereits auf der Kamera liegt, können Sie CameraRoll.saveToCameraRoll auf dem Bild (link to React Native documentation) verwenden, um es dorthin zu bekommen.

Der in diesem Beispiel verwendete Ansatz funktioniert nur dann, wenn Sie die Freigabe von der Kamera zulassen und ich mich nicht sicher bin, wie dies unter Android funktioniert. I made an issue on Expo's feature request board, um sicherzustellen, dass Instagram Sharing funktioniert out of the box.