10

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

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

我尝试过的事情：

  • 反应原生相机胶卷
  • 世博会图像选择器
  • 世博会图像选择器
  • 反应原生图像选择器
  • 反应图像上传
  • 反应本机照片上传

我的代码：

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 而引起问题？我应该只使用带有 react-native 的 CameraRoll 吗？

4

2 回答 2

12

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

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

于 2019-11-05T19:49:49.797 回答
1

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

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

您可以尝试使用 . 通过相机上传图像ImagePicker.launchCameraAsync和使用ImagePicker.launchImageLibraryAsync.

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

于 2020-12-18T08:18:16.890 回答