React Native ImagePicker报错：callback is not a function 技术求助

错误原因分析 #

1. launchImageLibrary参数错误：该方法不需要第一个字符串参数'library'，直接传入配置对象即可。你多传的字符串被当成了回调函数，导致"callback is not a function"错误。
2. 字段名与state不匹配：
   • 从response.assets[0]中解构的img64base不存在，正确的base64字段名是base64
   • state初始化的是imageSource，但setState时用的是img64base，导致Image组件无法获取正确的数据源

修正后的代码 #

import * as ImagePicker from 'react-native-image-picker';
import { SafeAreaView, Button, Image } from 'react-native';
import { Component } from 'react';

export class App extends Component {
  constructor() {
    super();
    this.state = { imageSource: null };
  }

  selectImage = () => {
    const selectImageFromGallery = async () => {
      const response = await ImagePicker.launchImageLibrary({
        selectionLimit: 1,
        mediaType: 'photo',
        includeBase64: true,
      });

      // 检查是否有选中的图片
      if (response.didCancel || !response.assets?.length) {
        return;
      }

      // 获取base64数据并转换为Image可识别的格式
      const { base64 } = response.assets[0];
      this.setState({
        imageSource: { uri: `data:image/jpeg;base64,${base64}` }
      });
    };

    selectImageFromGallery();
  };

  render() {
    return (
      <SafeAreaView style={{ justifyContent: 'center', alignItems: 'center', flex: 1 }}>
        <Button title='Select from gallery' onPress={this.selectImage} />
        {this.state.imageSource && (
          <Image
            source={this.state.imageSource}
            style={{ width: 200, height: 200, marginTop: 20 }}
          />
        )}
      </SafeAreaView>
    );
  }
}

关键修正点 #

• 移除launchImageLibrary的第一个无效参数'library'，只传配置对象
• 正确解构response.assets[0]中的base64字段
• 将base64数据转换为Image组件可识别的uri格式（data:image/jpeg;base64,${base64}）
• 增加选中状态的判断，避免用户取消选择后报错
• 给Image组件添加尺寸样式，否则图片可能无法显示
• 优化onPress的写法，直接绑定this.selectImage即可

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