React native -相机和图像库-无工作

d5vmydt9  于 2023-10-22  发布在  React
关注(0)|答案(1)|浏览(135)

我有问题得到任何类型的相机和图像库选择器工作?我正在运行expo CLI,最新版本。
当我创建一个新项目时,它不会自动包含任何IOS或ANDROID文件夹,所以我没有地方放置任何权限(如果我必须这样做?)
我已经尝试了几乎每一个教程去和没有工作。
所有我需要知道的是什么是最简单的方法来实现这一点,并使用什么。另外,如果我必须添加权限,如何做到这一点。
我见过很多人有这个问题,但没有真实的解决方案。
谢谢

ttcibm8c

ttcibm8c1#

好吧,感谢迈克尔斯的帮助和几个小时的研究,我已经设法让它工作,比我想象的更容易,代码比我尝试过的东西少得多!只在IOS上测试过,但现在可以轻松地合并到个人资料页面之类的东西中。希望它能帮助其他人解决同样的问题。
完整代码:

import React, { useState, useEffect } from 'react';
import { Button, Image, View, Platform } from 'react-native';
import * as ImagePicker from 'expo-image-picker';

export default function ImagePickerExample() {
  const [image, setImage] = useState(null);

  const pickImage = async () => {
    
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

    console.log(result);

    if (!result.canceled) {
      setImage(result.assets[0].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;
}

    let result = await ImagePicker.launchCameraAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.All,
      allowsEditing: true,
      aspect: [4, 3],
      quality: 1,
    });

console.log(result);
setImage(result.assets[0].uri);

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

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Pick an image from camera roll" onPress={pickImage} />

      <Button title="Camera" onPress={openCamera} />
       {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
    </View>
  );
}

相关问题