React Native实现从Android分享菜单跳转至指定页面

问题说明 #

已在React Native应用中实现分享功能，点击分享按钮弹出的分享菜单包含本应用，但用户选择本应用后仅会打开App首页，无法跳转到指定的Message页面，需要处理Android Intent并实现页面跳转。

解决方案步骤 #

1. 确认AndroidManifest配置 #

确保AndroidManifest.xml中MainActivity的配置正确，已设置launchMode="singleTask"（当前配置已满足），且分享接收的intent-filter无误：

<activity android:name=".MainActivity" 
          android:launchMode="singleTask"
          android:configChanges="keyboard|keyboardHidden|orientation|screenSize|screenLayout|uiMode"
          android:windowSoftInputMode="adjustResize"
          android:theme="@style/Theme.App.SplashScreen"
          android:exported="true"
          android:screenOrientation="portrait">
  <!-- 应用主入口 -->
  <intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LAUNCHER"/>
    <data android:scheme="com.my.AppShare" />
  </intent-filter>
  <!-- 接收分享的Intent配置 -->
  <intent-filter>
    <action android:name="android.intent.action.SEND" />
    <category android:name="android.intent.category.DEFAULT" />
    <data android:mimeType="*/*" />
  </intent-filter>
</activity>

singleTask模式确保应用从后台唤起时复用已有Activity实例，是处理后续Intent的基础。

2. 在React Native中处理Intent并跳转 #

通过Linking模块监听应用启动/唤起时的Intent，结合导航引用实现页面跳转：

2.1 更新App.js

补充导入MessageScreen，添加Intent监听与跳转逻辑：

import HomeScreen from "./src/components/HomeScreen";
import MessageScreen from "./src/components/MessageScreen";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { Linking } from "react-native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

export default function App() {
  const navigationRef = React.useRef(null);

  React.useEffect(() => {
    // 处理冷启动时的初始Intent
    const handleInitialIntent = async () => {
      const url = await Linking.getInitialURL();
      triggerPageJump(url);
    };

    // 处理后台唤起时的Intent
    const subscription = Linking.addEventListener('url', ({ url }) => {
      triggerPageJump(url);
    });

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

  // 触发跳转至Message页面
  const triggerPageJump = (url) => {
    // 可根据url或分享内容添加判断逻辑，此处直接跳转
    navigationRef.current?.navigate('Message');
  };

  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{ headerShown: false }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Message" component={MessageScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2.2 （可选）获取分享的具体内容

若需要获取分享的文本、URL等数据，可通过原生层传递数据到RN端：

1. 修改MainActivity.java，添加Intent数据传递逻辑：

@Override
protected void onNewIntent(Intent intent) {
  super.onNewIntent(intent);
  String sharedContent = intent.getStringExtra(Intent.EXTRA_TEXT);
  // 将分享内容发送给RN
  getReactInstanceManager().getCurrentReactContext()
    .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
    .emit("shareReceived", sharedContent);
}

2. 在App.js中监听事件并传递参数到页面：

import { DeviceEventEmitter } from 'react-native';

// 在useEffect中添加
React.useEffect(() => {
  const shareSubscription = DeviceEventEmitter.addListener('shareReceived', (content) => {
    navigationRef.current?.navigate('Message', { sharedContent: content });
  });
  return () => shareSubscription.remove();
}, []);

3. 测试验证 #

1. 重新编译应用：npx react-native run-android
2. 点击HomeScreen的分享按钮，选择本应用
3. 确认应用直接跳转到Message页面

注意事项 #

• 确保navigationRef正确关联NavigationContainer，否则无法调用navigate方法
• 应用处于后台时，onNewIntent会被触发，需在原生层处理数据传递
• 若使用Expo框架，可直接用expo-linking和expo-intent-launcher实现相同功能

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