Imagepicker React Native 在 iOS 上崩溃但在 Android 上运行良好

Posted

技术标签:

【中文标题】Imagepicker React Native 在 iOS 上崩溃但在 Android 上运行良好【英文标题】:Imagepicker React Native crashes on iOS but works fine on Android 【发布时间】:2020-07-15 05:10:36 【问题描述】:

我目前在 react native 上使用 imagepicker。当我使用 android 来选择图像时,它工作正常。但是,当我使用 ios 时,当我选择照片时它会崩溃。

这是它在 xcode 调试器中显示的错误:

2020-04-03 11:54:27.802434+0800 app[7218:1993193] -[NSURLResponse allHeaderFields]:无法识别的选择器发送到实例 0x28281aba0 2020-04-03 11:54:27.802766+0800 app[7218:1993193] * 由于未捕获的异常“NSInvalidArgumentException”而终止应用程序,原因:“-[NSURLResponse allHeaderFields]:无法识别的选择器发送到实例 0x28281aba0” * 首先抛出调用栈: (0x19d01c164 0x19cd30c1c 0x19cf1a7e0 0x19d02085c 0x102b27bc8 0x102b27a90 0x102b27a90 0x102b01ce0 0x1059f5d10 0x1059f718c 0x1059ff718c 0x1059ff580 0x1059ff580 0x1059ff580 0x105a0b0f0 0x19cd23714 0x19cd299c8) libc++abi.dylib:以 NSException 类型的未捕获异常终止

这是我的代码:

chooseImage = async (id) => 
        //await this.askPermissionsAsync();
        let options = 
          title: 'Select Image',
          storageOptions: 
            skipBackup: true,
            path: 'images',
          ,
        ;
        ImagePicker.showImagePicker(options, (response) => 
          console.log('Response = ', response.error);

          if (response.didCancel) 
            console.log('User cancelled image picker');
           else if (response.error) 
            console.log('ImagePicker Error: ', response.error);
           else 
            const source =  uri: response.uri ;

            // You can also display the image using data:
            // const source =  uri: 'data:image/jpeg;base64,' + response.data ;
            // alert(JSON.stringify(response));


            let file_data = [...this.state.fileData];
            file_data[id] = response.data;

            let file_uri = [...this.state.fileUri];
            file_uri[id] = response.uri;

            this.setState(filePath:response, fileData: file_data, fileUri: file_uri);
          
        );
      

我还在 info.plist 中添加了权限:

    <key>NSCameraUsageDescription</key>
    <string></string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string></string>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string></string>
    <key>NSDocumentsFolderUsageDescription</key>
    <string></string>

但问题仍然存在于 ios。

【问题讨论】:

【参考方案1】:

问题是

'data:image/jpeg;base64,' + this.state.fileData[id]

在图像标签上渲染它时。 此处指出了此问题:

YellowBox Crash

Image Crash with data:image/png;base64

我所做的解决方案是在选项上添加“noData:true”并直接访问图像标签中的URI文件位置。

希望对你有帮助

【讨论】:

【参考方案2】:

react-native 链接没有链接库,所以法师选择器库没有与应用程序一起构建。这就是为什么我因为没有库而得到空指针异常。

或者手动添加库。

<key>NSCameraUsageDescription</key>
	<string>Access to take a photo by camera</string>
<key>NSAppleMusicUsageDescription</key>
	<string>Access to pick a photo</string>
<key>NSPhotoLibraryUsageDescription</key>
	<string>Access to pick a photo</string>

【讨论】:

以上是关于Imagepicker React Native 在 iOS 上崩溃但在 Android 上运行良好的主要内容,如果未能解决你的问题,请参考以下文章

Imagepicker React Native 在 iOS 上崩溃但在 Android 上运行良好

在 Cloudinary 上使用 axios 上传 React-Native imagePicker

Image Picker 在 React Native 应用程序中不起作用,为啥?

React Native Firebase 多张图片上传问题

React Native,图像选择器,获取,表单数据如何发布请求图像

React 使用antd imagePicker选择并上传图片