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

【问题标题】：Adding share action/extension in React Native在 React Native 中添加共享操作/扩展
【发布时间】：2019-09-18 17:38:17
【问题描述】：

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

【问题讨论】：

您找到解决方案了吗？我相信下面的答案不是你一直在问的
也有兴趣知道。显然，下面的答案没有回答 OP 问题。
根据我们的 on-topic 指导，“有些问题仍然是题外话，即使它们属于上面列出的类别之一：...向我们提出的问题推荐或查找书籍、工具、软件库、教程或其他场外资源是题外话..."

标签： react-native

【解决方案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);

【讨论】：

更新：这个组件现在也支持iOS了。
嗨@Caio 当你想发布时，你会做什么？您是否在扩展时使用主项目中的捆绑包？或者你复制粘贴到扩展包上？谢谢！
@MaKo 我只是生成了一个主项目的捆绑包，其中将包含扩展
嗨@CaioAlmeida，有趣的是，动作扩展没有出现在我的设备上，而在模拟器中它工作正常（相同的设备版本和iOS版本）。有什么想法吗？
不是真的，不幸的是我正在寻找一个iOS开发者来维护iOS版本:(github.com/meedan/react-native-share-menu/issues/…

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

如果您的意思是：developers.facebook.com/docs/react-native/sharing，那么您指的是逆向操作：从 RN 应用程序内部打开共享菜单到外部站点或其他应用程序。这里的问题是注入一个显示在所有应用程序中的共享项目，以将内容发送到 RN 应用程序。