react-native-image-picker 与 expo ImagePicker

Question

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

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

我尝试过的事情：

React Native 相机胶卷
Expo ImagePicker
expo-image-picker
react-native-image-picker
反应图片上传
react-native-照片上传

我的代码：

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;

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

react-native-image-picker: NativeModule.ImagePickerManager is null

或

Can not read property 'showImagePicker' of undefined.

或

undefined is not an object(evaluating 'imagepickerManager.showimagepicker')

是否因为我使用的是 Expo 而导致问题？我应该只将 CameraRoll 与 react-native 一起使用吗？

Answer 1

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

任何需要使用 react-native link 的内容都不适用于 Expo，除非说明它已包含在 Expo 中。

Answer 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 中还找不到相同的方法。

react-native-image-picker 与 expo ImagePicker

react-native-image-picker vs expo ImagePicker

react-native

react-native-camera

expo

react-native-image-picker