在 react native 中，函数无法通过 props 正确传递给子组件，通常是因为组件参数未按 react 规范接收 props 对象，而是错误地将多个 props 拆解为独立形参，导致函数 prop 始终为 undefined。
在 react native 中，函数无法通过 props 正确传递给子组件，通常是因为组件参数未按 react 规范接收 props 对象，而是错误地将多个 props 拆解为独立形参，导致函数 prop 始终为 undefined。
问题根源在于：React（包括 React Native）中，所有 props 都以单个对象形式传入组件函数，而非多个独立参数。而原 SearchBar 组件的函数签名误将 props 拆分为多个形参：
// ❌ 错误写法：props 被当作多个独立参数传入
export default function SearchBar(
border = false,
iconSize,
addStyles,
placeholder = "search",
handleOnFocus, // 实际上，这个参数永远接收不到值！
onChangeText,
onBlur
) { ... }
此时，调用
✅ 正确做法是：使用解构语法接收 props 对象，并为可选函数 prop 设置默认值（推荐 () => {} 避免运行时错误）：
// ✅ 正确写法：解构 props 对象，显式声明所需属性
import { View, TextInput, StyleSheet } from "react-native";
import { Ionicons } from "@expo/vector-icons";
export default function SearchBar({
border = false,
iconSize = 20,
addStyles,
placeholder = "search",
handleOnFocus = () => {}, // 安全默认值
onChangeText = () => {},
onBlur = () => {},
}) {
return (
<view style="{[Styles.searchbarView," addstyles><ionicons name="search" size="{iconSize}" color="#666"></ionicons><textinput style="{{" flex: marginleft: fontsize: height: placeholder="{placeholder}" placeholdertextcolor="#999" onchangetext="{onChangeText}" onfocus="{handleOnFocus}" onblur="{onBlur}" autocapitalize="none" autocorrect="{false}"></textinput></view>
);
}
const Styles = StyleSheet.create({
searchbarView: {
height: 35,
flexDirection: "row",
alignItems: "center",
marginTop: 30,
borderColor: "#1ACE2B",
borderWidth: 1,
borderRadius: 7,
paddingHorizontal: 10,
marginHorizontal: 20,
},
});
在父组件 StoreScreen 中，调用方式保持简洁清晰：
{/* ✅ 正确传入函数 */}
<searchbar border="{true}" placeholder="Search products..." handleonfocus="{()"> {
console.log("Search bar focused");
setIsSearchFocused(true);
}}
onChangeText={handleChangeText}
/></searchbar>
⚠️ 注意事项：
-
避免直接执行函数：如
是错误的——这会在渲染时立即执行 console.log，而非在聚焦时触发。 - 函数 prop 必须是引用相等的稳定函数：若在 render 中内联定义（如 handleOnFocus={() => {}}），每次渲染都会创建新函数，可能影响性能或依赖逻辑（如 useEffect）。高频场景建议用 useCallback 缓存。
- 类型安全建议：若使用 TypeScript，应为 handleOnFocus 明确标注类型：handleOnFocus?: () => void。
- 调试技巧：可在 SearchBar 开头添加 console.log("Props received:", { ...props }); 快速验证 props 是否到达。
总结：React 的 props 本质是单个对象，必须通过解构或 props.xxx 访问。掌握这一基础机制，能从根本上避免“函数 prop 未定义”类错误，并提升组件复用性与可维护性。
