Android ReactActivity中React Native组件props变化后UI不更新问题求助

我之前也碰到过一模一样的问题！核心原因就是React Native会复用同一个根组件的实例和状态——哪怕你从Android端通过ReactActivityDelegate传了新的props，只要getMainComponentName()指定的组件名没变，RN就不会重新初始化组件，直接用之前内存里留存的旧状态渲染。给你几个可行的解决方案，按推荐度排序：

解决方案1：通过NativeModule发送事件更新Props（最优雅） #

这个方法不用销毁RN上下文，而是通过原生模块给RN组件发送事件通知，让组件主动更新状态，是性能最优的方案。

Android端实现 #

1. 先写一个原生模块，用来给RN发送事件：

public class PropsUpdateModule extends ReactContextBaseJavaModule {
    public PropsUpdateModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        // 模块名，RN端要用到
        return "PropsUpdateModule";
    }

    @ReactMethod
    public void sendNewProps(String propsJson) {
        // 发送事件到RN
        getReactApplicationContext()
                .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
                .emit("onNewPropsReceived", propsJson);
    }
}

2. 在自定义ReactPackage里注册这个模块：

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

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

3. 在需要传递新props的地方（比如ReactActivityDelegate里）调用模块发送事件：

// 把你的新props转成JSON字符串（这里用Gson举例）
Map<String, Object> newProps = new HashMap<>();
newProps.put("key1", "新值1");
newProps.put("key2", 123);
String propsJson = new Gson().toJson(newProps);

// 获取模块实例并发送事件
ReactApplicationContext reactContext = getReactApplicationContext();
PropsUpdateModule module = reactContext.getNativeModule(PropsUpdateModule.class);
module.sendNewProps(propsJson);

RN端实现 #

在你的根组件里监听事件，更新状态触发渲染：

import { DeviceEventEmitter, useEffect, useState } from 'react';
import { View, Text } from 'react-native';

export default function MainComponent(initialProps) {
  const [currentProps, setCurrentProps] = useState(initialProps);

  useEffect(() => {
    // 监听原生发送的事件
    const subscription = DeviceEventEmitter.addListener(
      'onNewPropsReceived',
      (propsJson) => {
        const newProps = JSON.parse(propsJson);
        setCurrentProps(newProps);
      }
    );

    // 组件卸载时移除监听
    return () => subscription.remove();
  }, []);

  // 用currentProps渲染UI
  return (
    <View style={{ padding: 20 }}>
      <Text>当前属性值1：{currentProps.key1}</Text>
      <Text>当前属性值2：{currentProps.key2}</Text>
    </View>
  );
}

解决方案2：重置ReactInstanceManager（简单但开销大） #

如果你的场景不需要保留之前的RN状态，直接销毁旧的RN上下文，重新创建实例加载组件，这种方式最直接，但会丢失所有之前的组件状态，性能开销也较大。

在你的ReactActivity或自定义ReactActivityDelegate里添加重置逻辑：

public void resetRNInstanceWithNewProps(Map<String, Object> newProps) {
    // 获取当前的ReactInstanceManager
    ReactInstanceManager oldManager = getReactInstanceManager();
    if (oldManager != null) {
        // 销毁旧实例，释放内存
        oldManager.destroy();
    }

    // 创建新的ReactInstanceManager，传入新props
    ReactInstanceManager newManager = ReactInstanceManager.builder()
            .setApplication(getApplication())
            .setCurrentActivity(this)
            .setBundleAssetName("index.android.bundle")
            .setJSMainModulePath("index")
            .addPackage(new MainReactPackage())
            // 这里传入新props
            .setInitialProps(newProps)
            .build();

    // 设置新实例并重新加载
    setReactInstanceManager(newManager);
    reloadReactNative();
}

调用这个方法时，传入你需要的新props即可，RN会重新初始化组件，用新props渲染。

解决方案3：让根组件监听props变化（局限性大） #

理论上可以在RN根组件里用componentDidUpdate或者useEffect监听props变化，但因为根组件是被RN框架直接挂载的，当原生端传新props时，框架不会主动触发根组件的props更新，所以这个方法只有在特定场景下生效（比如根组件内部有子组件传递props的情况），不推荐作为主要解决方案。

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