react-native-image-picker vs expo ImagePicker

Question

我尝试了很多尝试来启动 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 图像上传

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 is null

或者

Can not read property 'showImagePicker' of undefined.

或者

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

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

Answer 1

使用 expo-image-picker如果您使用的是世博会。

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