如何让我的React-Native Android应用出现在其他安卓应用的分享列表中

嘿，我来帮你搞定把React Native Android应用加到其他App分享列表里的事儿！这其实主要是在Android原生配置里做文章，再加上React Native端处理接收的分享数据，一步步来：

首先得让Android系统知道你的App能接收分享请求，这就需要在android/app/src/main/AndroidManifest.xml里给对应的Activity添加intent-filter。

如果你想让主Activity处理分享，找到<activity android:name=".MainActivity">节点，在里面加入以下配置：

<intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <!-- 支持文本分享 -->
    <data android:mimeType="text/plain" />
    <!-- 要支持图片就解开下面这行注释 -->
    <!-- <data android:mimeType="image/*" /> -->
    <!-- 要支持任意类型文件就解开下面这行注释 -->
    <!-- <data android:mimeType="*/*" /> -->
</intent-filter>

简单解释下这些标签：

• action.SEND：告诉系统你的App可以接收外部发送的内容
• category.DEFAULT：确保你的App会出现在系统的分享列表中
• data：指定你能接收的内容类型，按需调整就行

要是你不想用主Activity处理分享，也可以单独创建一个ShareActivity，在Manifest里注册它并加上同样的intent-filter即可。

配置好原生部分后，就需要在RN里获取其他App传过来的内容了，这里给你两种方案：

方案一：用第三方库（简单快捷） #

推荐用react-native-share-menu，它已经封装好了分享接收的逻辑。安装完成后，直接在代码里监听：

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

const App = () => {
  const [sharedContent, setSharedContent] = useState(null);

  useEffect(() => {
    const subscription = ShareMenu.addNewShareListener((content) => {
      if (content.mimeType === 'text/plain') {
        setSharedContent(content.data);
        // 这里写你处理文本的逻辑
      } else if (content.mimeType.startsWith('image/')) {
        setSharedContent(`图片路径：${content.data}`);
        // 这里写你处理图片的逻辑
      }
    });

    return () => subscription.remove();
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text>收到的分享内容：{sharedContent || '暂无'}</Text>
    </View>
  );
};

export default App;

方案二：原生+RN事件传递（无需第三方） #

如果你不想依赖第三方库，可以自己在原生代码里获取Intent数据，再通过事件传递给RN：

1. 打开android/app/src/main/java/com/[你的包名]/MainActivity.java，修改代码：

import com.facebook.react.modules.core.DeviceEventManagerModule;
import android.content.Intent;
import android.net.Uri;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    handleShareIntent(getIntent());
}

@Override
protected void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    handleShareIntent(intent);
}

private void handleShareIntent(Intent intent) {
    String action = intent.getAction();
    String type = intent.getType();

    if (Intent.ACTION_SEND.equals(action) && type != null) {
        // 处理文本分享
        if ("text/plain".equals(type)) {
            String sharedText = intent.getStringExtra(Intent.EXTRA_TEXT);
            sendShareDataToRN(sharedText);
        }
        // 处理图片分享
        else if (type.startsWith("image/")) {
            Uri imageUri = intent.getParcelableExtra(Intent.EXTRA_STREAM);
            if (imageUri != null) {
                sendShareDataToRN(imageUri.toString());
            }
        }
    }
}

private void sendShareDataToRN(String data) {
    if (getReactInstanceManager().getCurrentReactContext() != null) {
        getReactInstanceManager().getCurrentReactContext()
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("onShareReceived", data);
    }
}

2. 然后在RN组件里监听这个事件：

import React, { useEffect, useState } from 'react';
import { View, Text, NativeEventEmitter, NativeModules } from 'react-native';

const App = () => {
  const [sharedData, setSharedData] = useState('暂无分享内容');

  useEffect(() => {
    const eventEmitter = new NativeEventEmitter(NativeModules.RNDeviceEventEmitter);
    const subscription = eventEmitter.addListener('onShareReceived', (data) => {
      setSharedData(data);
      // 这里写你处理分享内容的逻辑
    });

    return () => subscription.remove();
  }, []);

  return (
    <View style={{ padding: 20 }}>
      <Text>收到的分享：{sharedData}</Text>
    </View>
  );
};

export default App;

配置完成后，重新打包你的Android应用（npx react-native run-android），然后打开微信、浏览器这类支持分享的App，点击分享按钮，就能看到你的App出现在分享列表里了！选择你的App后，就能在RN界面里看到接收的分享内容啦。

内容的提问来源于stack exchange，提问作者Anu