React Native选图触发onChangeImage is not a function报错

报错onChangeImage is not a function由两个直接问题导致：

• 你在App.js中调用ImageInput组件时，没有传入组件依赖的两个必填属性：imageUri（当前选中图片的URI）、onChangeImage（选图/删图触发的状态更新回调）。组件内部执行选图逻辑后调用onChangeImage时，拿到的值是undefined，直接触发类型错误。
• App.js中使用了useState、useEffect两个React Hook，但没有从react包中导入这两个方法，会触发额外的运行时错误。
• 额外冗余问题：App.js中独立实现了一套权限申请、相册唤起逻辑，和ImageInput组件内部封装的逻辑完全重复，属于无效代码。

1. 补全React核心依赖导入 #

在App.js顶部补上缺失的React Hook导入，原有react-native的导入保留即可：

// 新增这行导入
import React, { useState } from "react";
import {
  StyleSheet,
  View,
  Image,
} from 'react-native';

注：因为ImageInput组件内部已经实现了权限申请逻辑，App.js里不需要再重复写useEffect和权限申请相关代码，所以不用导入useEffect。

2. 给ImageInput传入必填属性 #

删除App.js中重复的选图、权限申请逻辑，调用ImageInput时把父组件维护的状态和更新方法传进去，修改后的App.js完整代码参考：

import React, { useState } from "react";
import {
  View,
  Image,
} from 'react-native';

import Screen from "./app/components/Screen";
import ImageInput from "./app/components/ImageInput";


export default function App() {
  const [imageUri, setImageUri] = useState();

  return (
    <Screen>
      <ImageInput 
        imageUri={imageUri}
        onChangeImage={setImageUri}
      />
      {imageUri && (
        <Image 
          source={{uri: imageUri }} 
          style={{ width: 200, height: 200, marginTop: 20 }} 
        />
      )}
    </Screen>
  );
}

3. （可选）增加组件参数兜底 #

为了避免后续漏传props触发同类错误，可以在ImageInput组件里增加类型校验，调用方法前先判断是否为函数：

// selectImage方法中修改
if (!result.cancelled && typeof onChangeImage === 'function') {
  onChangeImage(result.uri);
}

// 删除确认弹窗的回调修改
{ text: "Yes", onPress: () => {
  if(typeof onChangeImage === 'function') onChangeImage(null)
}},

后续遇到React/React Native场景下的xxx is not a function报错，按以下顺序排查即可：

• 检查报错对应的方法，是否从依赖包中正确导入，是否存在拼写错误
• 检查子组件内部调用的props方法，是否在父组件调用子组件时正确传入，是否存在属性名拼写错误、漏传的问题
• 检查传入的属性值类型是否匹配，比如要求传入函数类型的属性，实际传了字符串、对象、undefined，就会触发这类类型错误
• 类组件场景额外检查方法调用的this指向是否正确，函数组件不存在该问题

内容的提问来源于stack exchange，提问作者Owais Tahir