3

我正在使用 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 });
    }
  };
}
4

2 回答 2

2

如果您使用 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 });
    }
  };
}
于 2019-08-05T15:43:13.750 回答
0

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

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/

于 2022-03-01T02:17:27.527 回答