Question

尝试构建一个React Native应用程序，该应用程序在“共享”菜单（Android的“共享操作”，“iOS的共享扩展”）中注入一个菜单项，并在应用程序中接收共享项。是否有一个组件，如果没有，最好的方法是什么？

Answer 1

我为此实现了一个模块：https://www.npmjs.com/package/react-native-share-menu（目前仅适用于Android）。

这是如何使用它：

安装模块：

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

在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')

在android / app / 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);

Answer 2

您可以使用内置组件：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

Answer 3

您可以使用0.33中引入的新Share api。我实际上有一个关于如何在此处执行此操作的视频：http://codecookbook.co/post/how-to-share-text-from-your-react-native-app/

在React Native中添加共享操作/扩展

3 个答案: