React-Native-Image-Picker：null 不是对象（评估）错误

Question

当我使用 react-native-image-picker(^3.11.1) 从图库中获取图像时，会出现如下错误。

TypeError: null 不是对象（评估 '_reactNative.NativeModules.ImagePickerManager.launchImageLibrary'）

const onPresslaunchGallery = () => {
const options = {mediaType: 'photo'};
launchImageLibrary(options, (resp) => {
  if (resp.fileName && resp.uri) {
    setAvatar(resp);
  }
  console.log('resp', resp);
});

};

使用expo并在expo之后安装react-native-image-picker，但仍然出现错误。

Answer 1

我还没有看到你的完整源代码，但这里有一个工作示例，展示了如何从图库中获取图像并显示它们。

这是完整的工作示例：Expo Snack

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Button, Image, FlatList, Text } from 'react-native';
import { Ionicons } from '@expo/vector-icons';
import * as ImagePicker from 'expo-image-picker';

export default function Add() {
  const [galleryPermission, setGalleryPermission] = useState(null);
  const [imageUri, setImageUri] = useState(null);

  const permisionFunction = async () => {
    // here is how you can get the camera permission

    const imagePermission = await ImagePicker.getMediaLibraryPermissionsAsync();
    console.log(imagePermission.status);

    setGalleryPermission(imagePermission.status === 'granted');

    if (imagePermission.status !== 'granted') {
      alert('Permission for media access needed.');
    }
  };

  useEffect(() => {
    permisionFunction();
  }, []);

  const pick = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      quality: 1,
    });

    if (!result.cancelled) {
      setImageUri(result.uri);
    }
  };

  return (
    <View style={styles.container}>
      {imageUri ? (
        <Image
          source={{ uri: imageUri }}
          style={{ flex: 1, borderRadius: 10, margin: 5 }}
        />
      ) : (
        <View style={styles.textBox}>
          <Text>No Image Selected</Text>
        </View>
      )}
      <Button title={'Pick From Gallery'} onPress={pick} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textBox: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});