在 react native 中，当将函数作为 prop 传递给自定义组件（如 searchbar）却报错“handleonfocus is not a function”时，根本原因在于组件函数参数未正确接收 props 对象，而是错误地将多个 props 拆解为独立形参，导致所有 props 实际都落入第一个参数中，其余均为 undefined。
在 react native 中，当将函数作为 prop 传递给自定义组件（如 searchbar）却报错“handleonfocus is not a function”时，根本原因在于组件函数参数未正确接收 props 对象，而是错误地将多个 props 拆解为独立形参，导致所有 props 实际都落入第一个参数中，其余均为 undefined。
这个问题并非 React Native 特有，而是源于对 React 函数组件参数机制的根本误解：所有 JSX 属性（props）都会被合并为一个单一的对象，作为组件函数的唯一参数传入。而原 SearchBar 组件的函数签名：
export default function SearchBar( border = false, iconSize, addStyles, placeholder = "search", handleOnFocus, // ❌ 错误：这不是独立参数，而是 props 对象的属性 onChangeText, onBlur )
实际等价于：
export default function SearchBar(props) {
const border = props; // ✅ 所有 props 都进了这里！
const iconSize = undefined;
const handleOnFocus = undefined; // ❌ 因此始终为 undefined
}因此，无论你在 <SearchBar handleOnFocus={...} /> 中如何传值，handleOnFocus 始终无法被正确读取。
✅ 正确做法是：使用对象解构语法接收 props，并为可选函数 prop 设置安全默认值（如空函数），避免运行时崩溃：
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" />
<TextInput
style={{
flex: 1,
marginLeft: 5,
fontSize: 16,
paddingVertical: 4,
}}
placeholder={placeholder}
placeholderTextColor="#999"
onChangeText={onChangeText}
onFocus={handleOnFocus} // ✅ 直接赋值，无需箭头函数包装
onBlur={onBlur}
autoCapitalize="none"
autoCorrect={false}
/>
</View>
);
}
const Styles = StyleSheet.create({
searchbarView: {
height: 35,
flexDirection: "row",
alignItems: "center",
marginTop: 30,
borderColor: "#1ACE2B",
borderWidth: border ? 1 : 0,
borderRadius: 7,
paddingHorizontal: 10,
marginHorizontal: 20,
backgroundColor: "#f9f9f9",
},
});? 关键修正点总结：
- ✅ 使用 { ... } 解构 props 对象，而非按顺序罗列参数；
- ✅ 为 handleOnFocus、onChangeText、onBlur 等函数型 prop 提供默认空函数 () => {}，防止 undefined is not a function 报错；
- ✅ onFocus 和 onBlur 可直接赋值函数引用（如 onFocus={handleOnFocus}），无需额外箭头函数包裹，提升性能与可读性；
- ✅ border 等布尔型 prop 应参与样式逻辑（如 borderWidth: border ? 1 : 0），增强组件可控性。
? 在 StoreScreen 中调用时保持简洁清晰：
<SearchBar
border={true}
placeholder="Search products..."
handleOnFocus={() => {
console.log("Search bar focused");
setIsSearchFocused(true);
}}
onChangeText={handleChangeText}
onBlur={() => setIsSearchFocused(false)}
/>? 额外建议：
- 若需支持更多交互（如清空、取消），可在 SearchBar 内部封装 ref 或暴露 clear() 方法；
- 考虑使用 TypeScript 为 props 添加类型定义，提前捕获此类参数错误；
- 避免在 onFocus 中执行耗时操作——React Native 的 TextInput 在快速聚焦/失焦时可能触发多次，必要时加入防抖或状态守卫。
遵循这一规范后，函数 props 将稳定传递、可靠执行，组件复用性与健壮性显著提升。
