开发者问题收集

Expo 图像选择器:未处理的承诺拒绝:TypeError:未定义不是一个对象

2020-12-02
5745

我目前正在开发一款小型应用,我想将相机胶卷中的图像加载到应用中。我已经在 Expo Image Picker 文档的帮助下构建了一个组件来实现这一点。遗憾的是,我的 expo 客户端中总是出现以下警告,我无法从相机胶卷中选择任何图像。当我单击按钮选择它们时,它只是保持原样。

我的代码:

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'
    }
})

我收到的警告:

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating '_expoImagePicker.default.launchImageLibraryAsync')]
* components/ImageChooser.js:23:23 in _getPhotoLibrary
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:293:29 in invoke
- node_modules/regenerator-runtime/runtime.js:63:36 in tryCatch
- node_modules/regenerator-runtime/runtime.js:154:27 in invoke
- node_modules/regenerator-runtime/runtime.js:189:16 in PromiseImpl$argument_0
- node_modules/react-native/node_modules/promise/setimmediate/core.js:45:6 in tryCallTwo
- node_modules/react-native/node_modules/promise/setimmediate/core.js:200:22 in doResolve
- node_modules/react-native/node_modules/promise/setimmediate/core.js:66:11 in Promise
- node_modules/regenerator-runtime/runtime.js:188:15 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:211:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:238:8 in exports.async
* components/ImageChooser.js:23:23 in _getPhotoLibrary
* components/ImageChooser.js:36:61 in TouchableOpacity.props.onPress
- node_modules/react-native/Libraries/Pressability/Pressability.js:691:17 in _performTransitionSideEffects
- node_modules/react-native/Libraries/Pressability/Pressability.js:628:6 in _receiveSignal
- node_modules/react-native/Libraries/Pressability/Pressability.js:524:8 in responderEventHandlers.onResponderRelease
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:265:4 in invokeGuardedCallbackImpl
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:476:2 in invokeGuardedCallback
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:500:2 in invokeGuardedCallbackAndCatchFirstError
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:597:41 in executeDispatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:621:19 in executeDispatchesInOrder
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2521:28 in executeDispatchesAndRelease
* [native code]:null in forEach
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:836:4 in forEachAccumulated
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2546:20 in runEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2702:18 in runExtractedPluginEventsInBatch
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2639:35 in batchedUpdates$argument_0
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:17712:13 in batchedUpdates$1
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2492:29 in batchedUpdates
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2638:16 in _receiveRootNodeIDEvent
- node_modules/react-native/Libraries/Renderer/implementations/ReactNativeRenderer-dev.js:2767:27 in receiveTouches
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:416:4 in __callFunction
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:109:6 in __guard$argument_0
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:364:10 in __guard
- node_modules/react-native/Libraries/BatchedBridge/MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
* [native code]:null in callFunctionReturnFlushedQueue
3个回答

您错误地导入了 ImagePicker

请使用 import * as ImagePicker from 'expo-image-picker';

以下是参考文档: https://docs.expo.io/versions/latest/sdk/imagepicker/

Phobos
2020-12-03

Expo-image-picker 需要一个插件才能访问本机代码。 确保您已将其包含在 app.json 中。 Expo-image-picker 文档

另外,不要忘记重建应用程序。

{
  "expo": {
    "plugins": [
      [
        "expo-image-picker",
        {
          "photosPermission": "The app accesses your photos to let you share them with your friends."
        }
      ]
    ]
  }
}

在您的 app.json(应用程序配置文件)中,将“expo-image-picker”数组添加到 plgins 数组。 要了解有关 app.json 的更多信息,请阅读: https://docs.expo.dev/versions/v46.0.0/config/app/

Zuraiz Zafar
2022-09-07

您可能需要检查 EAS 构建,以防出现问题。似乎 Native Module 始终未定义,因此可能是构建问题

尝试运行 eas build:list 并导航到您收到错误的最新构建。然后检查构建管道步骤。

expo doctor 标记了我使用的 react-native 版本的问题。修复此问题为我解决了错误

在此处输入图片说明

Sean
2022-10-22