React Native使用react-native-image-picker调用launchImageLibrary不触发回调

• 核心问题是react-native-image-picker自5.0.0版本之后，launchImageLibrary、launchCamera等方法废弃了回调函数的传参方式，统一改为返回Promise对象。你当前使用的是已废弃的回调写法，因此选中图片后逻辑不会触发。
• 次要注意点：你当前代码未对返回的图片数据做提取处理，即使回调触发也无法正确赋值给photoUri渲染预览。

将回调写法替换为Promise调用，推荐使用async/await写法，同时补充返回结果的异常判断、图片URI提取逻辑，修复后的完整代码示例如下：

import { useState } from 'react';
import { View, Image, Button } from 'react-native';
import { launchImageLibrary } from 'react-native-image-picker';

const PhotoPickerDemo = () => {
  const [photoUri, setPhotoUri] = useState(null);

  const renderPreviewImage = () => {
    if (!photoUri) {
      return null
    }
    return (
      <Image
        resizeMode="cover"
        resizeMethod="scale"
        style={{width: 200, height: 200}}
        source={{uri: photoUri}}
      />
    )
  }

  const handleSelectPhoto = async () => {
    try {
      const response = await launchImageLibrary({
        mediaType: "photo"
      });
      // 处理用户取消选择的场景
      if (response.didCancel) {
        console.log('用户取消了选择');
        return;
      }
      // 处理选择出错的场景
      if (response.errorCode) {
        console.log('选择出错：', response.errorMessage);
        return;
      }
      // 提取选中的图片URI
      if (response.assets && response.assets.length > 0) {
        const selectedUri = response.assets[0].uri;
        setPhotoUri(selectedUri);
        console.log('选中的图片地址：', selectedUri);
      }
    } catch (err) {
      console.log('调用相册异常：', err);
    }
  }

  return (
    <View style={{flex: 1}}>
      <Button title="Select Photo" onPress={handleSelectPhoto} />
      {renderPreviewImage()}
    </View>
  )
}

export default PhotoPickerDemo;

补充说明 #

如果你使用的是4.x及更早版本的react-native-image-picker，可以保留回调写法，需要额外检查两个点：

1. 安卓端AndroidManifest.xml是否添加了存储读取权限，iOS端Info.plist是否添加了相册访问权限描述
2. React Native 0.60以下版本需要检查是否完成了库的手动link操作

内容的提问来源于stack exchange，提问作者Wai Yan Hein