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

问题描述

尝试构建一个 React Native 应用，在 Share 菜单中注入一个菜单项(Android 的 Share Action，iOS 的 Share Extension)并接收应用中的共享项.是否有用于此的组件，如果没有，构建组件的最佳方法是什么?

Trying to build a React Native app that injects a menu item in the Share menu (Share Action for Android, Share Extension for iOS) and receives shared items in the app. Is there a component for this, and if not what's the best way to build one?

推荐答案

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

I implemented a module for that: https://www.npmjs.com/package/react-native-share-menu (currently just works for Android).

使用方法如下:

安装模块:

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

在 android/settings.gradle:

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

在 android/app/build.gradle:

In android/app/build.gradle:

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

注册模块(在 MainActivity.java 中):

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

示例:

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

这篇关于在 React Native 中添加共享操作/扩展的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！