從使用 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 標簽中顯示圖像就好了：

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

但是，我無法將圖像傳遞給 Instagram。 以下是一些失敗的研究：第三方庫：react-native-instagram-share： https : //www.instagram.com/developer/mobile-sharing/iphone-hooks/

因為我不能使用“鏈接”來使用本機依賴項。 我正在使用 Expo 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 上執行此操作。 我在 Expo 的功能請求板上提出了一個問題，以確保 Instagram 共享開箱即用。

Answer 2

這是你發帖的方式

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 3

以下是從遠程 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 4

為我工作:)

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