Question

我已经尝试了许多尝试来提高react-native-image-picker并与我的RN应用程序一起使用。我正在使用Expo和VS Code，但未在Xcode或Android Studio上运行该应用程序。在应用程序中提供相机胶卷似乎有很多选择，但我不确定哪一条是最佳选择。似乎没有一个对我有用，因此我想选择最佳途径，并专注于使那条路线可行。

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

我尝试过的事情：

反应本地相机胶卷
Expo ImagePicker
expo-image-picker
本机图像选择器
反应图像上传
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”。

或

未定义不是对象（正在评估'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，您可以在此处查看文档：{{3}}

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

在反应式cli中，我能够编写一个从相机和照片库中进行选择的功能，但在博览会中找不到相同的方法。

react-native-image-picker vs expo ImagePicker

2 个答案: