Hinzufügen von Share-Aktion/Erweiterung in React Native

Question

Der Versuch, eine React Native App zu erstellen, die einen Menüeintrag im Share-Menü einfügt (Share Action für Android, Share Extension für iOS) und Shared Items in der App empfängt. Gibt es dafür eine Komponente, und wenn nicht, was ist der beste Weg, einen zu bauen?

Answer 1

Ich implementierte ein Modul für das: https://www.npmjs.com/package/react-native-share-menu (derzeit funktioniert nur für Android).

Das ist, wie es zu benutzen:

Installieren Sie das Modul:

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

In android/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') 

In android/app/build.gradle:

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

Register-Modul (in 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  
     ); 
    } 
...... 
} 

Beispiel:

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

Answer 2

können Sie die in der Komponente gebaut verwenden: https://facebook.github.io/react-native/docs/actionsheetios.html#content

Oder Sie können diese Komponente verwenden, die jede Ansicht annehmen können Sie wollen, und macht es wie die Komponente iOS Aktie aussehen:

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

These sind für iOS konzipiert. Für Android (und auch iOS) können Sie dies verwenden:

Answer 3

können Sie die neuen Teile api in 0.33 eingeführt verwenden. Ich habe tatsächlich ein Video, wie man das hier macht: http://codecookbook.co/post/how-to-share-text-from-your-react-native-app/