React Native 实现一行代码调用自定义确认Modal的方案问询

完全可以实现，不过因为用户和弹窗的交互属于异步事件，没办法做到同步返回结果，我们可以通过Promise + async/await的写法实现和你期望几乎一致的一行式调用逻辑，同时完全满足不退出调用函数、不丢失内部局部状态的要求。

核心思路 #

把弹窗的触发逻辑封装成返回Promise的异步函数，用户点击确认/取消按钮时再通过Promise回传结果，调用时用await接收结果即可，写法和你期望的同步逻辑几乎没有差别。

代码实现 #

调用端代码（仅需加async/await关键字，逻辑完全符合你的预期） #

async function myCallerFunction() { 
  const lv_conf_result = await showConfirmPopup("Please confirm");
  if (lv_conf_result) {
     // 此处可以正常访问myCallerFunction内的所有局部变量，不需要退出函数
  }
}

封装实现代码 #

import { useState, Modal, View, Text, Button } from 'react-native';

// 全局暂存Promise的resolve方法
let resolveConfirm;

// 自定义确认弹窗组件，需要挂载到App根节点
const CustomConfirmPopup = () => {
  const [visible, setVisible] = useState(false);
  const [title, setTitle] = useState('');

  const showPopup = (titleText) => {
    setTitle(titleText);
    setVisible(true);
  };

  const handleConfirm = () => {
    setVisible(false);
    resolveConfirm?.(true);
  };

  const handleCancel = () => {
    setVisible(false);
    resolveConfirm?.(false);
  };

  // 把调用方法挂载到全局，任意位置都可以调用
  global.showConfirmPopup = (titleText) => {
    showPopup(titleText);
    return new Promise((resolve) => {
      resolveConfirm = resolve;
    });
  };

  return (
    <Modal visible={visible} transparent animationType="fade">
      {/* 自定义遮罩层样式 */}
      <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.5)', justifyContent: 'center', alignItems: 'center'}}>
        {/* 自定义弹窗内容样式 */}
        <View style={{width: 300, padding: 20, backgroundColor: 'white', borderRadius: 8}}>
          <Text style={{marginBottom: 20, fontSize: 16}}>{title}</Text>
          <View style={{flexDirection: 'row', justifyContent: 'flex-end', gap: 10}}>
            <Button title="取消" onPress={handleCancel} />
            <Button title="确认" onPress={handleConfirm} />
          </View>
        </View>
      </View>
    </Modal>
  );
};

export default CustomConfirmPopup;

额外注意点 #

• 你可以完全自定义Modal内的样式、按钮文案、输入框等扩展内容，不受系统Alert限制
• 如果需要支持多弹窗场景，可以新增队列逻辑，避免多个弹窗同时弹出冲突
• TypeScript项目可以给全局的showConfirmPopup方法添加类型声明，避免类型报错

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