React Native中如何通过类似Component.show()的函数渲染外部组件？

要实现像Ant Design message那样，无需在组件树中声明、直接通过Toast.show()调用的全局Toast，核心思路是动态创建并挂载组件到根视图层级，无需在业务组件中维护状态或写入Toast标签。以下是React Native环境下的具体实现方案：

方案一：纯JS实现（依赖Modal，需一行全局挂载代码） #

这种方式利用RN的Modal组件（天然挂载在顶层），通过单例状态控制显示，只需在项目入口处挂载一次Toast容器，之后即可全局调用：

1. 编写Toast UI组件 #

// components/Toast/ToastUI.js
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function ToastUI({ text }) {
  return (
    <View style={styles.container}>
      <View style={styles.toastBox}>
        <Text style={styles.text}>{text}</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    pointerEvents: 'none',
  },
  toastBox: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 4,
  },
  text: {
    color: '#fff',
    fontSize: 14,
  },
});

2. 编写全局Toast管理器 #

// components/Toast/index.js
import React, { useState, useEffect } from 'react';
import { Modal } from 'react-native';
import ToastUI from './ToastUI';

// 单例状态，维护Toast的显示状态和内容
const globalState = {
  visible: false,
  text: '',
  duration: 2000,
  update: () => {},
};

// 全局Toast容器组件
export function GlobalToast() {
  const [visible, setVisible] = useState(globalState.visible);
  const [text, setText] = useState(globalState.text);

  useEffect(() => {
    // 绑定状态更新函数到全局
    globalState.update = () => {
      setVisible(globalState.visible);
      setText(globalState.text);
    };

    // 自动关闭逻辑
    if (visible) {
      const timer = setTimeout(() => {
        globalState.visible = false;
        globalState.update();
      }, globalState.duration);
      return () => clearTimeout(timer);
    }
  }, [visible]);

  return (
    <Modal
      visible={visible}
      transparent={true}
      animationType="fade"
      onRequestClose={() => {
        globalState.visible = false;
        globalState.update();
      }}
    >
      <ToastUI text={text} />
    </Modal>
  );
}

// 对外暴露的调用API
const Toast = {
  show(text = '提示', duration = 2000) {
    globalState.text = text;
    globalState.duration = duration;
    globalState.visible = true;
    globalState.update();
  },
};

export default Toast;

3. 全局挂载Toast容器 #

在项目入口文件（如index.js）中，将GlobalToast添加到根组件的渲染中：

// index.js
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { GlobalToast } from './components/Toast';
import React from 'react';

// 包裹原App组件，添加GlobalToast
const RootApp = () => (
  <>
    <App />
    <GlobalToast />
  </>
);

AppRegistry.registerComponent(appName, () => RootApp);

之后你就可以在任意组件中直接调用：

import Toast from './components/Toast';

// 在按钮点击事件中调用
<TouchableOpacity onPress={() => Toast.show('操作成功')}>
  <Text>点击显示Toast</Text>
</TouchableOpacity>

方案二：无侵入式实现（需少量原生代码） #

这种方式参考react-native-root-siblings库的原理，直接在原生根视图下创建新的RootView来渲染Toast，完全无需修改业务组件或入口文件：

1. 编写原生模块（iOS/Android） #

iOS端：

创建一个RootViewManager类，用于创建和管理RootView：

// RootViewManager.h
#import <React/RCTViewManager.h>

@interface RootViewManager : RCTViewManager
@end

// RootViewManager.m
#import "RootViewManager.h"
#import <React/RCTRootView.h>

@implementation RootViewManager

RCT_EXPORT_MODULE()

RCT_EXPORT_METHOD(createRootView:(RCTResponseSenderBlock)callback) {
  dispatch_async(dispatch_get_main_queue(), ^{
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:self.bridge moduleName:@"ToastSibling" initialProperties:nil];
    rootView.backgroundColor = [UIColor clearColor];
    UIWindow *window = [[UIApplication sharedApplication] keyWindow];
    [window addSubview:rootView];
    
    callback(@[[NSNumber numberWithUnsignedLongLong:(unsigned long long)rootView]]);
  });
}

RCT_EXPORT_METHOD(removeRootView:(NSNumber *)rootTag) {
  dispatch_async(dispatch_get_main_queue(), ^{
    UIView *rootView = (__bridge UIView *)(void *)[rootTag unsignedLongLongValue];
    [rootView removeFromSuperview];
  });
}

@end

Android端：

创建RootViewManager类：

// RootViewManager.java
package com.yourprojectname;

import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.Callback;
import com.facebook.react.uimanager.UIManagerModule;
import com.facebook.react.views.view.ReactViewGroup;

import android.view.ViewGroup;
import android.app.Activity;
import android.view.WindowManager;

public class RootViewManager extends ReactContextBaseJavaModule {

  public RootViewManager(ReactApplicationContext reactContext) {
    super(reactContext);
  }

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

  @ReactMethod
  public void createRootView(Callback callback) {
    Activity activity = getCurrentActivity();
    if (activity == null) {
      callback.invoke(null);
      return;
    }

    activity.runOnUiThread(() -> {
      ReactViewGroup rootView = new ReactViewGroup(activity);
      rootView.setLayoutParams(new WindowManager.LayoutParams(
        WindowManager.LayoutParams.MATCH_PARENT,
        WindowManager.LayoutParams.MATCH_PARENT
      ));
      rootView.setBackgroundColor(0);

      ViewGroup rootViewGroup = activity.getWindow().getDecorView().findViewById(android.R.id.content);
      rootViewGroup.addView(rootView);

      callback.invoke(rootView.getId());
    });
  }

  @ReactMethod
  public void removeRootView(int rootTag) {
    Activity activity = getCurrentActivity();
    if (activity == null) return;

    activity.runOnUiThread(() -> {
      ViewGroup rootViewGroup = activity.getWindow().getDecorView().findViewById(android.R.id.content);
      View view = rootViewGroup.findViewById(rootTag);
      if (view != null) {
        rootViewGroup.removeView(view);
      }
    });
  }
}

然后在MainApplication.java中注册这个模块：

@Override
protected List<ReactPackage> getPackages() {
  @SuppressWarnings("UnnecessaryLocalVariable")
  List<ReactPackage> packages = new PackageList(this).getPackages();
  packages.add(new ReactPackage() {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
      List<NativeModule> modules = new ArrayList<>();
      modules.add(new RootViewManager(reactContext));
      return modules;
    }

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

2. 编写JS端Toast管理器 #

// components/Toast/index.js
import React from 'react';
import { View, Text, StyleSheet, NativeModules } from 'react-native';
import ReactNative from 'react-native';

const { RootViewManager } = NativeModules;

class Toast {
  constructor() {
    this.currentRootTag = null;
  }

  show(text = '提示', duration = 2000) {
    // 先销毁之前的Toast
    if (this.currentRootTag) {
      this.destroy();
    }

    // 创建Toast UI元素
    const toastElement = (
      <View style={styles.container}>
        <View style={styles.toastBox}>
          <Text style={styles.text}>{text}</Text>
        </View>
      </View>
    );

    // 调用原生模块创建RootView
    RootViewManager.createRootView((rootTag) => {
      if (!rootTag) return;
      this.currentRootTag = rootTag;

      // 渲染Toast到新的RootView
      ReactNative.render(toastElement, rootTag);

      // 自动关闭
      setTimeout(() => {
        this.destroy();
      }, duration);
    });
  }

  destroy() {
    if (this.currentRootTag) {
      ReactNative.unmountComponentAtNode(this.currentRootTag);
      RootViewManager.removeRootView(this.currentRootTag);
      this.currentRootTag = null;
    }
  }
}

export default new Toast();

const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    pointerEvents: 'none',
  },
  toastBox: {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
    paddingHorizontal: 16,
    paddingVertical: 8,
    borderRadius: 4,
  },
  text: {
    color: '#fff',
    fontSize: 14,
  },
});

3. 使用方式 #

直接在任意组件中导入并调用，无需修改任何全局组件：

import Toast from './components/Toast';

// 点击按钮显示Toast
<TouchableOpacity onPress={() => Toast.show('操作成功', 3000)}>
  <Text>点击显示Toast</Text>
</TouchableOpacity>

核心原理说明 #

两种方案的本质都是脱离业务组件树，将Toast挂载到全局根视图层级：

• 方案一利用RN的Modal组件特性（默认挂载在顶层），通过单例状态统一控制显示，只需全局挂载一次容器。
• 方案二通过原生模块直接创建新的RootView，完全独立于业务组件树，实现真正的无侵入式调用，和Ant Design message的原理一致（Web端是创建div追加到body）。

内容的提问来源于stack exchange，提问作者Kauã Reis