本文详解如何在 React Native 中通过函数引用（而非字符串）安全、可靠地将回调逻辑作为参数传入 Toast 等组件的事件处理器（如 onHide），避免常见执行时机错误与语法陷阱。
本文详解如何在 react native 中通过函数引用（而非字符串）安全、可靠地将回调逻辑作为参数传入 toast 等组件的事件处理器（如 `onhide`），避免常见执行时机错误与语法陷阱。
在 React Native 开发中，常需将特定业务逻辑（例如页面跳转、状态重置或 API 重试）绑定到第三方组件（如 react-native-toast-message）的生命周期事件上。一个典型场景是：当 Toast 消失时，触发 props.onPickScreen('Bar')。但若错误地将代码“当作字符串”或“立即执行后传值”，会导致逻辑不执行、提前执行，甚至运行时报错。
❌ 常见错误写法及问题分析
// 错误 1：传入字符串 —— 字符串不会被自动执行
showToast("...", "...", "error", "props.onPickScreen('Bar')");
// 错误 2：立即调用函数 —— 在 showToast 调用时就执行，而非 onHide 时
showToast("...", "...", "error", props.onPickScreen('Bar')); // 此刻已执行！返回值（通常是 undefined）被传入
上述两种方式均违背了回调函数的设计原则：onHide 接收的是一个函数（function reference），它将在 Toast 隐藏的时机由 Toast 库内部调用。传字符串无法执行；直接调用则失去延迟性，且可能因 props 未就绪而报错。
✅ 正确做法：传递函数引用（Arrow Function 或 Named Function）
只需修改 showToast 函数签名，使其接收一个函数类型的参数，并原样赋值给 onHide：
function showToast(text1, text2, type, onHideCallback) {
Toast.show({
text1,
text2,
position: 'top',
type,
onHide: onHideCallback, // 直接赋值函数引用，不加括号
});
}
调用时，使用箭头函数包裹目标逻辑（推荐），确保其为可被延迟调用的函数：
showToast(
"Reservation process failed",
"please rescan it",
"error",
() => props.onPickScreen('Bar') // ✅ 正确：定义函数，不执行
);
你也可以使用具名函数提升可读性或复用性：
const handleToastHidden = () => {
console.log('Toast hidden — navigating to Bar screen');
props.onPickScreen('Bar');
};
showToast("...", "...", "error", handleToastHidden); // 同样有效
? 关键原理说明
- () => props.onPickScreen('Bar') 创建了一个新函数对象，它本身不执行，仅描述“将来要做的事”；
- Toast.show() 内部会在检测到 Toast 隐藏时，主动调用 onHide() —— 此时才真正执行 props.onPickScreen('Bar')；
- 这种模式符合 JavaScript 的高阶函数思想，也是 React 事件处理的标准实践（如 onPress={() => doSomething()}）。
⚠️ 注意事项
- 不要解构或内联执行：避免 onHide: value4()（带括号），这会立即执行并把返回值赋给 onHide；
- 确保闭包安全：箭头函数能正确捕获 props，但若 props 是动态变化的（如函数组件中未稳定化），建议结合 useCallback 缓存回调；
-
类型提示更佳（TypeScript 推荐）：
function showToast( text1: string, text2: string, type: ToastType, onHideCallback?: () => void ) { /* ... */ }
掌握“传函数，不传结果”的思维，是驾驭 React Native 异步交互与组件通信的关键基础。从 Toast 到 Modal、Animated、GestureHandler，这一模式无处不在——理解它，你就掌握了可复用、可维护回调逻辑的核心范式。
