Expo Imagepicker 请求权限，但没有其他反应

Question

我正在使用 expo 构建一个 react-native 应用程序。我正在尝试实现世博会 imagePicker，以便用户可以从他们的画廊或相机胶卷中选择图像并在应用程序上使用它，但是在 ImagePicker ahs 请求权限并且我允许它们之后，没有其他任何事情发生。你的用户不会被带到他们的画廊或 cameraRoll。目前没有错误，但 imagePicker 无法正常工作。 我需要对我的代码进行哪些更改？

ImageSelector.js 文件

import * as React from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';
import * as Constants from 'expo-Constants';

export default class ImageSelector extends React.Component {
  state = {
    image: null,
  };

  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  componentDidMount() {
    this.getPermissionAsync();
  }

  getPermissionAsync = async () => {
    if (Constants.platform.android) {
      const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
      if (status !== 'granted') {
        alert('Sorry, we need camera roll permissions to make this work!');
      }
    }
  }

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

Answer 1

如果您使用 Expo，则不必使用它。而且您需要存储空间的权利。

您可以运行expo install expo-image-picker expo-permissions 并获得权限Permissions.CAMERA_ROL

示例

import * as React from 'react';
import { Button, Image, View } from 'react-native';
import * as ImagePicker from 'expo-image-picker';
import * as Permissions from 'expo-permissions';
import * as Constants from 'expo-Constants';

export default class ImagePickerExample extends React.Component {
  state = {
    image: null,
  };

  render() {
    let { image } = this.state;

    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Button
          title="Pick an image from camera roll"
          onPress={this._pickImage}
        />
        {image &&
          <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
      </View>
    );
  }

  componentDidMount() {
    this.getPermissionAsync();
  }

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

  _pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
    });

    console.log(result);

    if (!result.cancelled) {
      this.setState({ image: result.uri });
    }
  };
}

Answer 2

由于某种原因，这对我不起作用：

Permissions.askAsync(Permissions.CAMERA_ROLL);

我不断收到以下错误：

Unhandled promise rejection: Error: Failed to get permissions

所以，最终对我有用的是，这个函数用于从媒体库中选择图像：

const showImagePicker = async () => {
// Ask the user for the permission to access the media library 
const permissionResult = await ImagePicker.requestMediaLibraryPermissionsAsync();

if (permissionResult.granted === false) {
  alert("You've refused to allow this appp to access your photos!");
  return;
}

const result = await ImagePicker.launchImageLibraryAsync();

// Explore the result
console.log(result);

if (!result.cancelled) {
  setPickedImagePath(result.uri);
      console.log(result.uri);
    }
  }

此功能用于用相机拍照：

  const openCamera = async () => {
    // Ask the user for the permission to access the camera
    const permissionResult = await ImagePicker.requestCameraPermissionsAsync();

    if (permissionResult.granted === false) {
      alert("You've refused to allow this appp to access your camera!");
      return;
    }

    const result = await ImagePicker.launchCameraAsync();

    // Explore the result
    console.log(result);

    if (!result.cancelled) {
      setPickedImagePath(result.uri);
      console.log(result.uri);
    }
  }

在此处获取完整代码和完整说明：https://www.kindacode.com/article/image-picker-in-react-native/