React Native嵌入Android应用：返回时ActionBar标题不更新问题求助

嘿，我之前刚好碰到过一模一样的问题！核心原因是当你从第二个RN页面返回第一个页面时，第一个页面是从导航栈里恢复过来的，而不是重新加载，所以你之前放在componentDidMount这类初始化方法里的标题更新代码不会再次执行。下面给你几个可行的解决办法：

如果你的RN页面是用React Navigation管理导航的，那最简单的方式就是监听页面的焦点状态——每当页面获得焦点时，就调用Bridge去更新ActionBar标题。

示例代码：

import { useFocusEffect } from '@react-navigation/native';
import React, { useCallback } from 'react';

function FirstRNPage() {
  // 监听页面焦点，每次获得焦点就触发标题更新
  useFocusEffect(
    useCallback(() => {
      // 调用你的Bridge方法更新ActionBar标题，这里替换成你实际的方法名和标题
      NativeModules.TitleBridge.updateActionBarTitle("首页");

      // 可选：页面失去焦点时的清理操作，不需要的话可以留空
      return () => {};
    }, [])
  );

  return (
    // 你的页面UI内容
  );
}

如果你没用到React Navigation，或者想从Android宿主层面处理，可以在宿主Activity里监听返回按钮事件，当用户点击返回时，主动给当前显示的RN页面发送事件，触发标题更新。

Android端代码示例： #

@Override
public void onBackPressed() {
    // 先确认React Native实例和上下文存在
    if (mReactInstanceManager != null && mReactInstanceManager.getCurrentReactContext() != null) {
        ReactContext reactContext = mReactInstanceManager.getCurrentReactContext();
        // 通过DeviceEventEmitter给RN发送返回事件，附带需要更新的标题
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("onBackToPreviousPage", "首页");
    }
    super.onBackPressed();
}

RN端代码示例： #

import { NativeEventEmitter, NativeModules } from 'react-native';

// 创建事件发射器
const eventEmitter = new NativeEventEmitter(NativeModules.TitleBridge);

class FirstRNPage extends React.Component {
    componentDidMount() {
        // 监听Android端发来的返回事件
        this.backListener = eventEmitter.addListener('onBackToPreviousPage', (title) => {
            // 调用Bridge更新ActionBar标题
            NativeModules.TitleBridge.updateActionBarTitle(title);
        });
    }

    componentWillUnmount() {
        // 组件卸载时移除监听，避免内存泄漏
        this.backListener.remove();
    }

    render() {
        return (
            // 你的页面UI内容
        );
    }
}

如果你用的是React Navigation 5之前的旧版本，可以使用NavigationEvents组件来监听页面的焦点事件：

import { NavigationEvents } from 'react-navigation';

class FirstRNPage extends React.Component {
    render() {
        return (
            <>
                <NavigationEvents
                    onDidFocus={() => {
                        // 页面获得焦点时更新标题
                        NativeModules.TitleBridge.updateActionBarTitle("首页");
                    }}
                />
                {/* 你的页面UI内容 */}
            </>
        );
    }
}

• 前进到新页面时，新页面会执行componentDidMount这类初始化方法，所以标题更新正常；
• 返回时，前一个页面是从导航栈中恢复，不会重新执行初始化方法，因此必须通过焦点监听或跨端事件通知来触发标题更新的逻辑。

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