如何从Android原生Activity跳转RN页面？事件监听失效解决方案

一、React Native跳转至Android原生HomeActivity #

通过自定义Native模块实现RN调用原生跳转逻辑，步骤如下：

1. RN端代码（MainScreen） #

import { NativeModules, Button, View } from 'react-native';

// 与原生模块注册的名称保持一致
const { NativeActivityManager } = NativeModules;

export default function MainScreen() {
  const navigateToHomeActivity = () => {
    NativeActivityManager.startHomeActivity();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="跳转至原生HomeActivity" onPress={navigateToHomeActivity} />
    </View>
  );
}

2. Android原生端实现 #

（1）创建Native模块类

// 路径：com/yourappname/NativeActivityManager.java
package com.yourappname;

import android.content.Intent;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class NativeActivityManager extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;

    public NativeActivityManager(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "NativeActivityManager"; // 必须与RN端调用的模块名一致
    }

    @ReactMethod
    public void startHomeActivity() {
        Intent intent = new Intent(reactContext, HomeActivity.class);
        // 从非Activity上下文启动Activity必须添加此Flag
        intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        reactContext.startActivity(intent);
    }
}

（2）注册Native模块到Package

// 路径：com/yourappname/MyAppPackage.java
package com.yourappname;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyAppPackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new NativeActivityManager(reactContext));
        return modules;
    }

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }
}

（3）在MainApplication中添加自定义Package

// 路径：com/yourappname/MainApplication.java
@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    packages.add(new MyAppPackage()); // 添加自定义Native模块包
    return packages;
}

二、Android原生HomeActivity跳转至React Native的DetailScreen #

推荐通过启动RN入口Activity并传递路由参数的方式实现，避免RN上下文销毁导致事件监听失效的问题，步骤如下：

1. Android原生端代码（HomeActivity） #

在HomeActivity中添加跳转逻辑，传递目标路由名称：

// 路径：com/yourappname/HomeActivity.java
import android.content.Intent;
import android.os.Bundle;
import android.widget.Button;
import androidx.appcompat.app.AppCompatActivity;

public class HomeActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_home);

        Button goToDetailBtn = findViewById(R.id.btn_go_to_detail);
        goToDetailBtn.setOnClickListener(v -> {
            Intent intent = new Intent(this, MainActivity.class); // RN的入口Activity
            intent.putExtra("targetRoute", "DetailScreen"); // 传递目标路由名称
            // 清除栈顶并复用已有实例，避免重复创建Activity
            intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP | Intent.FLAG_ACTIVITY_SINGLE_TOP);
            startActivity(intent);
        });
    }
}

2. RN端代码实现路由跳转 #

（1）创建获取Intent参数的Native模块

// 路径：com/yourappname/IntentParamHelper.java
package com.yourappname;

import android.content.Intent;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.bridge.Arguments;

public class IntentParamHelper extends ReactContextBaseJavaModule {
    private final ReactApplicationContext reactContext;

    public IntentParamHelper(ReactApplicationContext reactContext) {
        super(reactContext);
        this.reactContext = reactContext;
    }

    @Override
    public String getName() {
        return "IntentParamHelper";
    }

    @ReactMethod
    public void getLaunchParams(Promise promise) {
        Intent intent = reactContext.getCurrentActivity().getIntent();
        if (intent != null && intent.hasExtra("targetRoute")) {
            String targetRoute = intent.getStringExtra("targetRoute");
            WritableMap params = Arguments.createMap();
            params.putString("targetRoute", targetRoute);
            promise.resolve(params);
            // 清除参数，避免下次启动重复跳转
            intent.removeExtra("targetRoute");
        } else {
            promise.resolve(null);
        }
    }
}

（2）更新MyAppPackage注册新模块

@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();
    modules.add(new NativeActivityManager(reactContext));
    modules.add(new IntentParamHelper(reactContext)); // 添加新模块
    return modules;
}

（3）RN端监听参数并跳转

假设使用React Navigation作为路由框架，在App入口处处理参数：

import { useEffect, useRef } from 'react';
import { NativeModules } from 'react-native';
import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MainScreen from './MainScreen';
import DetailScreen from './DetailScreen';

const Stack = createStackNavigator();
const { IntentParamHelper } = NativeModules;

export default function App() {
  const navigationRef = useNavigationContainerRef();

  const handleLaunchParams = async () => {
    try {
      const params = await IntentParamHelper.getLaunchParams();
      if (params?.targetRoute === 'DetailScreen') {
        navigationRef.current?.navigate('DetailScreen');
      }
    } catch (error) {
      console.error('获取启动参数失败:', error);
    }
  };

  useEffect(() => {
    handleLaunchParams();
  }, []);

  return (
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator initialRouteName="MainScreen">
        <Stack.Screen name="MainScreen" component={MainScreen} />
        <Stack.Screen name="DetailScreen" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

关于之前事件监听失效的说明 #

你之前尝试的原生发送RN事件方案失效，大概率是因为跳转到HomeActivity后，RN的入口Activity已进入onStop或onDestroy状态，ReactContext被销毁，导致事件无法被RN端监听。上述传递参数的方式更稳定，因为回到RN Activity时会重新激活上下文，读取参数后执行跳转。

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