react-native-image-picker vs expo ImagePicker

Posted 2023-02-16

【中文标题】react-native-image-picker vs expo ImagePicker

【英文标题】：

【发布时间】：2020-03-02 03:54:00

【问题描述】：

我已经尝试了很多尝试来获取 react-native-image-picker 并使用我的 RN 应用程序。我正在使用 Expo 和 VS Code，并且没有使用 Xcode 或 android Studio 运行该应用程序。在应用程序中获取相机胶卷似乎有很多选择，我不确定哪条是最佳途径。似乎没有一个对我有用，所以我想选择最好的路径并专注于使那条路径有效。

我正在关注文档：https://github.com/react-native-community/react-native-image-picker

我尝试过的事情：

React 原生相机胶卷 Expo ImagePicker expo-image-picker react-native-image-picker 反应图像上传 react-native-photo-upload

我的代码：

import React, useState, useEffect from 'react';
import StyleSheet, View, TextInput, TouchableOpacity, Text, CameraRoll  from 'react-native'
import ImagePicker from 'react-native-image-picker';
// import * as ImagePicker from 'expo-image-picker';
import Constants from 'expo-constants';

const PicturesScreen = (navigation) => 
    const [pictures, setPictures] = useState([]);

getPermissionAsync = async () => 
    if (Constants.platform.ios) 
      const  status  = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') 
        alert('Sorry, we need camera roll permissions to make this work!');
      
    
;

useEffect(() => 
    getPermissionAsync();
, []);

selectPhotoTapped = () => 
   const options = 
      quality: 1.0,
      maxWidth: 500,
      maxHeight: 500,
      storageOptions: 
        skipBackup: true,
      ,
    ;

    ImagePicker.showImagePicker(options, response =>     
      if (response.didCancel) 
        console.log('User cancelled photo picker');
       else if (response.error) 
        console.log('ImagePicker Error: ', response.error);
       else if (response.customButton) 
        console.log('User tapped custom button: ', response.customButton);
       else 
        let source = uri: response.uri;
        console.log('source: ' + source);
        // You can also display the image using data:
        // let source =  uri: 'data:image/jpeg;base64,' + response.data ;

        setPictures(
          picture: source
        );
      
    );
  ;


return (
    <View style = styles.container>
        <TouchableOpacity style = styles.buttonContainerPhoto onPress=()=> selectPhotoTapped()> 
            <Text style=styles.buttonText >
                Upload Photos 
            </Text>
        </TouchableOpacity> 

    <TouchableOpacity style = styles.buttonContainer onPress=()=> navigation.navigate('NextScreen')> 
            <Text style=styles.buttonText >
                Next 
            </Text>
        </TouchableOpacity>
    </View>
    );
;

const styles = StyleSheet.create(
    container: 
        ...
    
);

export default PicturesScreen; 

我已确保链接软件包，我也卸载并重新安装并从头开始几次。我已降级版本以使其正常工作，但我仍然继续收到以下错误消息之一：

react-native-image-picker: NativeModule.ImagePickerManager 为空

或

无法读取未定义的属性“showImagePicker”。

或

undefined 不是对象（正在评估 'imagepickerManager.showimagepicker'）

是否因为我使用 Expo 而导致问题？我应该只使用带有 react-native 的 CameraRoll 吗？

【问题讨论】：

我正在使用 RN v0.60.4 和 react-native-image-picker v1.0.1。在 android 模拟器和 ios 模拟器上运行良好。正如您所逃避的那样，这很可能是世博会的问题。另见***.com/questions/54352838/…

哼。是的，我使用的是 react-native: 0.59.8 并尝试在 v0.26.0 和 0.28.0 上运行它。我想知道在 RN 上运行它是否也可能是一个问题

如果您使用 Expo，则必须使用 expo-image-picker：docs.expo.io/versions/v35.0.0/sdk/imagepicker 任何需要使用 react-native link 的东西都不适用于 Expo，除非声明它已经与 Expo 捆绑世博会

谢谢，如果您想将此作为答案发布，我可以将其标记为正确@zaytrix

【参考方案1】：

如果您使用 Expo，请使用 expo-image-picker。

任何需要使用 react-native link 的东西都不适用于 Expo，除非声明它已经包含在 Expo 中。

【讨论】：

知道如何在图库选择器中使用相机选项。类似于 twitter 和其他人所做的事情？

@MohamedDaher 你可以使用 ImagePicker.launchCameraAsync() (docs.expo.io/versions/latest/sdk/imagepicker/…) 来启动相机

我认为你没有得到我的问题。我需要一个相机按钮（切换拇指）作为画廊内的一个项目。这是要求用户输入图像的现代方式（为他们提供选择图像或拍照的选项）

@MohamedDaher 这些应用程序使用自己的自定义库而不是本机库。 expo-image-picker 只启动原生的。你可以做的是创建一个自定义组件，它有一个打开本机相机的按钮和一个打开本机图库的按钮。您需要考虑另一种选择，从图库中获取图像以创建您自己的自定义图库，并使用按钮启动相机，这对于 Expo 管理的工作流程可能是不可能的。

是的，这就是我的想法，而且它足够公平，因为使用 expo 您同意他们的堆栈产品和构建自定义规范将要求您在本地构建或至少在没有 expo 的情况下构建。非常感谢您的帮助

【参考方案2】：

我遇到了同样的问题，现在我已经解决了。 React native cli 和 expo cli 都有一些包的不同。同样，两者的图像选择器工作方式不同。

对于 expo cli，您可以在此处查看文档：https://docs.expo.io/versions/latest/sdk/imagepicker/#__next

您可以尝试使用ImagePicker.launchCameraAsync 通过相机上传图片，使用ImagePicker.launchImageLibraryAsync 从照片库上传图片。

在 react-native cli 中，我能够编写一个函数来从相机和照片库中进行选择，但在 expo 中找不到相同的方法。