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

Question

我正在使用 expo 构建一个 react-native 应用程序。我正在尝试实现 expo 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，就不一定要用了。并且您需要存储权 space.

您可以运行 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/

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

Expo Imagepicker asks for permissions but nothing else happens

react-native

expo

react-native-image-picker