React Native导航栏添加筛选图标报错：object is not a function

• 问题根源：headerLeft属性要求传入返回React元素的函数，你直接传入了JSX元素，导航框架会尝试调用它，自然会报“object is not a function”。

• 修正后的代码：

import MaterialCommunityIcons from '@expo/vector-icons/MaterialCommunityIcons';

// ...

<Stack.Screen
  name="Address"
  component={Address}
  options={{
    headerLeft: () => (
      <MaterialCommunityIcons 
        name="filter" 
        size={24} 
        color="black" 
        style={{ marginLeft: 16 }} 
      />
    )
  }}
/>

• 额外说明：
  • 如果需要给图标加点击事件，直接在函数里给图标绑定onPress即可，比如：

    headerLeft: () => (
      <MaterialCommunityIcons 
        name="filter" 
        size={24} 
        color="black" 
        style={{ marginLeft: 16 }}
        onPress={() => { /* 这里写筛选逻辑 */ }}
      />
    )
    

  • 记得先确保已经安装了图标库（比如@expo/vector-icons或者react-native-vector-icons），并正确导入组件。

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