世博图像选择器：未处理的承诺拒绝：类型错误：未定义不是对象

Question

我目前正在开发一个小型应用程序，我想将相机胶卷中的图像加载到应用程序中。我已经在 Expo Image Picker 文档的帮助下构建了一个组件来执行此操作。遗憾的是，我总是在我的博览会客户端中收到以下警告，并且我无法从相机胶卷中选取任何图像。当我单击按钮选择它们时，它就保持原样。

我的代码：

import React, {useEffect, useState} from 'react';

import { View, Image, TouchableOpacity, PermissionsAndroid, Alert, Platform, StyleSheet } from 'react-native';

import * as Permissions from 'expo-permissions';

import ImagePicker from 'expo-image-picker';

import { MaterialIcons } from '@expo/vector-icons'

export default function ImageChooser() {

    const [imageSource, setImageSource] = useState([]);

    getPermissionAsync = async () => {

        

          const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);

          if (status !== 'granted') {

            alert('Sorry, we need camera roll permissions to make this work!');

          }

          

    };

    

    useEffect(() => {

        getPermissionAsync();

    }, []);

    

    _getPhotoLibrary = async () => {

        let result = await ImagePicker.launchImageLibraryAsync({

         allowsEditing: true,

         aspect: [4, 3]

        });

        if (!result.cancelled) {

         setImageSource({ image: result.uri });

        }

    }

    

    return (

        <View style={styles.container}>

            <TouchableOpacity style={styles.button} onPress={() => _getPhotoLibrary()}>

                {!imageSource && <MaterialIcons name="add-a-photo" style={styles.icon} size={36} />}

                {/* {imageSource && <Image source={{uri:imageSource}} style={styles.image} />} */}

            </TouchableOpacity>

        </View>

    )

}

const styles = StyleSheet.create({

    container: {

        paddingLeft: 20,

        paddingVertical: 10

    },    

    button: {

        flex: 1,

        alignItems: 'center',

        justifyContent: 'center',

        width: 200,

        height: 150,

        borderWidth: 1,

        borderColor: '#C6C6C8',

        borderRadius: 5,

        backgroundColor: '#fff'

    },

    image: {

        width: 200,

        height: 150

    },

    icon: {

        color: '#C6C6C8'

    }

})

Answer 1

您导入ImagePicker不正确，使用import * as ImagePicker from 'expo-image-picker';

Answer 2

您可能需要检查您的 EAS 版本，以防出现问题。似乎本机模块始终未定义，因此可能是构建问题尝试运行eas build:list并导航到您收到错误的最新版本。然后检查构建管道步骤。expo doctor标记了我正在使用的反应本机版本的问题。解决这个问题为我解决了错误

Answer 3

Expo-image-picker需要一个插件来访问本机代码。确保您已将其包含在 app.json 中。Expo-图像选择器文档另外不要忘记重建应用程序。{  "expo": {    "plugins": [      [        "expo-image-picker",        {          "photosPermission": "The app accesses your photos to let you share them with your friends."        }      ]    ]  }}将“expo-image-picker”数组添加到 app.json（应用程序配置文件）中的 plgins 数组中。

Answer 4

2天后我意识到这个问题的原因。这是相关的世博会申请。我在其他设备上尝试了我的应用程序，但没有遇到这个问题。删除 expo 并重新安装后，我的代码运行成功。