2015-11-17 70 views
6

試圖構建一個React Native應用程序,該應用程序在共享菜單(Android的Share Action,Share Extension for iOS)中注入菜單項並接收應用程序中的共享項目。有沒有一個組件,如果不是什麼是最好的方式來建立一個?在React Native中添加共享操作/擴展

+2

您是否找到了解決方案?我相信下面的答案不是你一直在問的有關 – stkvtflw

+1

也有興趣知道。很明顯,下面的答案不回答OP問題。 – ericpeters0n

回答

6

我爲此模塊實現了一個模塊:https://www.npmjs.com/package/react-native-share-menu(目前僅適用於Android)。

這是如何使用它:

安裝模塊:

npm i --save react-native-share-menu

在安卓/ settings.gradle:

... 
include ':react-native-share-menu', ':app' 
project(':react-native-share-menu').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-share-menu/android') 

在Android設備/應用/的build.gradle:

... 
dependencies { 
    ... 
    compile project(':react-native-share-menu') 
} 

註冊模塊(MainActivity.java):

import com.meedan.ShareMenuPackage; // <--- import 

public class MainActivity extends ReactActivity { 
...... 
    @Override 
    protected List<ReactPackage> getPackages() { 
     return Arrays.<ReactPackage>asList(
      new MainReactPackage(), 
      new ShareMenuPackage() // <------ add here  
     ); 
    } 
...... 
} 

例子:

import React, { 
    AppRegistry, 
    Component, 
    Text, 
    View 
} from 'react-native'; 
import ShareMenu from 'react-native-share-menu'; 

class Test extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      sharedText: null 
     }; 
    } 

    componentWillMount() { 
     var that = this; 
     ShareMenu.getSharedText((text :string) => { 
      if (text && text.length) { 
       that.setState({ sharedText: text }); 
      } 
     }) 
    } 

    render() { 
     var text = this.state.sharedText; 
     return (
      <View> 
       <Text>Shared text: {text}</Text> 
      </View> 
     ); 
    } 
} 

AppRegistry.registerComponent('Test',() => Test); 
+0

更新:此組件現在也支持iOS。 – infojunkie

+0

嗨@Caio當你想發佈時,你會做什麼?你是否使用擴展主項目中的包?或者你是否複製粘貼該擴展名的包?謝謝! – MaKo

+0

@MaKo我只是生成一個主項目包,其中將包括擴展 –

-4

您可以使用內置的組件:https://facebook.github.io/react-native/docs/actionsheetios.html#content

或者你可以使用這個組件,它可以接受任何你想要的視圖,並使它看起來像iOS的共享組件:

https://github.com/eyaleizenberg/react-native-custom-action-sheet

這些是爲iOS設計的。對於Android(以及iOS),您可以使用: https://github.com/EstebanFuentealba/react-native-share

+0

這不回答OP的問題。 – ericpeters0n

-3

您可以使用在0.33中引入的新股份的API。我實際上有一個關於如何在此處執行此操作的視頻:http://codecookbook.co/post/how-to-share-text-from-your-react-native-app/

+0

如果你的意思是這:https://developers.facebook.com/docs/react-native/sharing然後你指的是逆操作:從RN應用程序打開共享菜單到外部網站或其他應用程序。這裏的問題是注入一個分享項目,該項目將在所有應用程序中顯示,以向RN應用程序發送內容。 – infojunkie