React Native全局动态模态框/Toast组件实现问题咨询

React Native是否支持Portals？ #

React Native没有像React DOM那样原生提供Portal API，但可以通过根级别组件挂载的方式实现类似Portal的效果——将组件直接渲染到App根视图的同级或顶层，脱离当前组件树的上下文限制。

可行方案 #

方案1：使用react-native-root-siblings（最简便）

这是专门用于在React Native中创建根级别组件的库，支持在组件内外调用，完美适配你的需求。

1. 安装依赖：

npm install react-native-root-siblings --save

2. 创建全局通知管理器（比如GlobalNotification.js）：

import RootSiblings from 'react-native-root-siblings';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

let siblingInstance = null;

export const showToast = ({ text, onButtonPress }) => {
  // 先关闭已存在的Toast
  if (siblingInstance) {
    siblingInstance.destroy();
  }
  
  siblingInstance = new RootSiblings(
    <View style={styles.toastContainer}>
      <Text style={styles.toastText}>{text}</Text>
      {onButtonPress && (
        <TouchableOpacity 
          style={styles.button}
          onPress={() => {
            onButtonPress();
            siblingInstance.destroy();
          }}
        >
          <Text style={styles.buttonText}>确定</Text>
        </TouchableOpacity>
      )}
    </View>
  );
};

export const hideToast = () => {
  if (siblingInstance) {
    siblingInstance.destroy();
    siblingInstance = null;
  }
};

const styles = StyleSheet.create({
  toastContainer: {
    position: 'absolute',
    bottom: 50,
    left: 20,
    right: 20,
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderRadius: 8,
    padding: 16,
    alignItems: 'center'
  },
  toastText: { color: 'white', fontSize: 14 },
  button: { marginTop: 12, paddingHorizontal: 20, paddingVertical: 8, backgroundColor: '#fff', borderRadius: 4 },
  buttonText: { color: '#000', fontSize: 14 }
});

3. 组件内外调用：

// 组件内部调用
import { showToast } from './GlobalNotification';

const SomeComponent = () => {
  return (
    <TouchableOpacity onPress={() => {
      showToast({
        text: '这是全局Toast',
        onButtonPress: () => console.log('按钮被点击了')
      });
    }}>
      <Text>显示Toast</Text>
    </TouchableOpacity>
  );
};

// 组件外部调用（比如工具函数、API回调里）
import { showToast } from './GlobalNotification';

const fetchData = async () => {
  try {
    await api.get('/data');
  } catch (err) {
    showToast({
      text: '请求失败，请重试',
      onButtonPress: () => fetchData()
    });
  }
};

方案2：手动挂载到根视图（无第三方依赖）

如果不想用第三方库，可以直接通过React Native的底层API将组件挂载到根视图：

1. 创建全局通知工具（GlobalNotification.js）：

import { View, Text, TouchableOpacity, StyleSheet, AppRegistry } from 'react-native';
import React from 'react';

let rootView = null;

// 注册根视图引用（在App根组件中调用）
export const registerRootView = (view) => {
  rootView = view;
};

export const showToast = ({ text, onButtonPress }) => {
  if (!rootView) return;

  // 创建Toast组件
  const ToastComponent = () => (
    <View style={styles.toastContainer}>
      <Text style={styles.toastText}>{text}</Text>
      {onButtonPress && (
        <TouchableOpacity style={styles.button} onPress={() => {
          onButtonPress();
          hideToast();
        }}>
          <Text style={styles.buttonText}>确定</Text>
        </TouchableOpacity>
      )}
    </View>
  );

  // 挂载到根视图
  const appKey = 'GlobalToast';
  AppRegistry.registerComponent(appKey, () => ToastComponent);
  const toastInstance = AppRegistry.runApplication(appKey, { rootTag: rootView });

  // 保存实例用于销毁
  rootView.toastInstance = toastInstance;
};

export const hideToast = () => {
  if (rootView?.toastInstance) {
    rootView.toastInstance.unmount();
    rootView.toastInstance = null;
  }
};

const styles = StyleSheet.create({
  toastContainer: {
    position: 'absolute',
    bottom: 50,
    left: 20,
    right: 20,
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderRadius: 8,
    padding: 16,
    alignItems: 'center'
  },
  toastText: { color: 'white', fontSize: 14 },
  button: { marginTop: 12, padding: 8, backgroundColor: '#fff', borderRadius: 4 },
  buttonText: { color: '#000', fontSize: 14 }
});

2. 在根组件中注册根视图：

import { useRef, useEffect } from 'react';
import { View } from 'react-native';
import { registerRootView } from './GlobalNotification';

const App = () => {
  const rootRef = useRef(null);

  useEffect(() => {
    registerRootView(rootRef.current);
  }, []);

  return (
    <View ref={rootRef} style={{ flex: 1 }}>
      {/* 你的App内容 */}
    </View>
  );
};

3. 组件内外调用方式和方案1一致。

方案3：改进Context API（轻量方案）

之前的Context无法在组件外调用，是因为Context只能在React组件树中访问。可以结合全局ref解决：

1. 创建Context和根组件：

import { createContext, useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const NotificationContext = createContext();

export const NotificationProvider = ({ children }) => {
  const toastRef = useRef(null);

  // 暴露全局调用方法
  useEffect(() => {
    global.showToast = ({ text, onButtonPress }) => {
      if (toastRef.current) {
        toastRef.current.show({ text, onButtonPress });
      }
    };
  }, []);

  return (
    <NotificationContext.Provider value={{ toastRef }}>
      {children}
      <ToastComponent ref={toastRef} />
    </NotificationContext.Provider>
  );
};

// Toast组件（用forwardRef暴露方法）
const ToastComponent = forwardRef((props, ref) => {
  const [visible, setVisible] = useState(false);
  const [config, setConfig] = useState({});

  // 暴露show方法给外部
  useImperativeHandle(ref, () => ({
    show: ({ text, onButtonPress }) => {
      setConfig({ text, onButtonPress });
      setVisible(true);
    },
    hide: () => setVisible(false)
  }));

  if (!visible) return null;

  return (
    <View style={styles.toastContainer}>
      <Text style={styles.toastText}>{config.text}</Text>
      {config.onButtonPress && (
        <TouchableOpacity 
          style={styles.button}
          onPress={() => {
            config.onButtonPress();
            setVisible(false);
          }}
        >
          <Text style={styles.buttonText}>确定</Text>
        </TouchableOpacity>
      )}
    </View>
  );
});

const styles = StyleSheet.create({
  toastContainer: {
    position: 'absolute',
    bottom: 50,
    left: 20,
    right: 20,
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderRadius: 8,
    padding: 16,
    alignItems: 'center'
  },
  toastText: { color: 'white', fontSize: 14 },
  button: { marginTop: 12, padding: 8, backgroundColor: '#fff', borderRadius: 4 },
  buttonText: { color: '#000', fontSize: 14 }
});

2. 在App入口包裹Provider：

import { NotificationProvider } from './NotificationContext';

const App = () => {
  return (
    <NotificationProvider>
      {/* 你的App内容 */}
    </NotificationProvider>
  );
};

3. 调用方式：

// 组件内部可以用Context，也可以直接用global.showToast
global.showToast({
  text: '测试Toast',
  onButtonPress: () => console.log('按钮点击')
});

// 组件外部（比如工具函数）直接调用global.showToast即可

方案4：Redux+事件总线（适配已有Redux栈）

如果你的项目已经用了Redux，可以不用把回调存到store，而是用事件总线关联：

1. 创建事件总线（比如EventBus.js）：

const listeners = {};

export const EventBus = {
  on: (event, callback) => {
    if (!listeners[event]) listeners[event] = [];
    listeners[event].push(callback);
  },
  emit: (event, data) => {
    if (listeners[event]) {
      listeners[event].forEach(callback => callback(data));
    }
  },
  off: (event, callback) => {
    if (listeners[event]) {
      listeners[event] = listeners[event].filter(cb => cb !== callback);
    }
  }
};

2. Redux action和reducer：

// action types
export const SHOW_TOAST = 'SHOW_TOAST';
export const HIDE_TOAST = 'HIDE_TOAST';

// action creator
export const showToast = (payload) => ({
  type: SHOW_TOAST,
  payload: { ...payload, id: Date.now().toString() } // 生成唯一ID
});

export const hideToast = () => ({
  type: HIDE_TOAST
});

// reducer
const initialState = {
  visible: false,
  text: '',
  id: ''
};

export const toastReducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_TOAST:
      return {
        ...state,
        visible: true,
        text: action.payload.text,
        id: action.payload.id
      };
    case HIDE_TOAST:
      return { ...state, visible: false };
    default:
      return state;
  }
};

3. Toast组件监听Redux和事件总线：

import { useSelector, useDispatch } from 'react-redux';
import { EventBus } from './EventBus';
import { hideToast } from './actions';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const ToastComponent = () => {
  const { visible, text, id } = useSelector(state => state.toast);
  const dispatch = useDispatch();

  useEffect(() => {
    const handleButtonPress = () => {
      dispatch(hideToast());
    };

    // 监听对应ID的按钮点击事件
    EventBus.on(`TOAST_BUTTON_${id}`, handleButtonPress);

    return () => {
      EventBus.off(`TOAST_BUTTON_${id}`, handleButtonPress);
    };
  }, [id, dispatch]);

  if (!visible) return null;

  return (
    <View style={styles.toastContainer}>
      <Text style={styles.toastText}>{text}</Text>
      <TouchableOpacity 
        style={styles.button}
        onPress={() => EventBus.emit(`TOAST_BUTTON_${id}`)}
      >
        <Text style={styles.buttonText}>确定</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  toastContainer: {
    position: 'absolute',
    bottom: 50,
    left: 20,
    right: 20,
    backgroundColor: 'rgba(0,0,0,0.7)',
    borderRadius: 8,
    padding: 16,
    alignItems: 'center'
  },
  toastText: { color: 'white', fontSize: 14 },
  button: { marginTop: 12, padding: 8, backgroundColor: '#fff', borderRadius: 4 },
  buttonText: { color: '#000', fontSize: 14 }
});

4. 调用方式：

import { useDispatch } from 'react-redux';
import { showToast } from './actions';
import { EventBus } from './EventBus';

// 组件内部调用
const SomeComponent = () => {
  const dispatch = useDispatch();

  return (
    <TouchableOpacity onPress={() => {
      const id = Date.now().toString();
      dispatch(showToast({ text: 'Redux Toast', id }));
      // 注册回调到事件总线
      EventBus.on(`TOAST_BUTTON_${id}`, () => {
        console.log('按钮被点击');
        EventBus.off(`TOAST_BUTTON_${id}`); // 用完销毁
      });
    }}>
      <Text>显示Redux Toast</Text>
    </TouchableOpacity>
  );
};

// 组件外部调用
import { store } from './store';
import { showToast } from './actions';

const fetchData = async () => {
  try {
    await api.get('/data');
  } catch (err) {
    const id = Date.now().toString();
    store.dispatch(showToast({ text: '请求失败', id }));
    EventBus.on(`TOAST_BUTTON_${id}`, () => {
      fetchData();
      EventBus.off(`TOAST_BUTTON_${id}`);
    });
  }
};

方案对比 #

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