使用 Expo 输入照片

Question

我正在尝试创建一个允许您从设备中选择图像并将其加载到应用程序中的应用程序。为此，我正在使用世博会。我收到此错误，不知道现在该怎么办。 非常感谢任何类型的帮助。

这些是我安装的依赖项：react-scripts、react-dom、react-native-web、react-art、react-router-native、react-router-dom、expo、expo-image-picker、expo -permissions，react-native。

错误

节点脚本/start.js

(node:7488) [DEP_WEBPACK_SINGLE_ENTRY_PLUGIN] 弃用警告：SingleEntryPlugin 已重命名为 EntryPlugin （使用node --trace-deprecation ... 显示警告的创建位置） 无效的选项对象。 Ignore Plugin 已使用与 API 不匹配的选项对象初始化 架构。

• 选项应该是以下之一： 对象 { 资源正则表达式，上下文正则表达式？ } |对象 { checkResource } 细节：
  • options 缺少属性“resourceRegExp”。应该： 正则表达式 -> 用于测试请求的正则表达式。
  • options 缺少属性“checkResource”。应该： 功能 -> 资源和上下文的过滤功能。 npm 错误！代码生命周期 npm 错误！错误号 1 npm 错误！照片输入@0.1.0 开始：node scripts/start.js npm 错误！退出状态 1 npm 错误！ npm 错误！ photo-input@0.1.0 启动脚本失败。 npm 错误！这可能不是 npm 的问题。上面可能还有额外的日志输出。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ C:\Users\gituk\AppData\Roaming\npm-cache_logs\2021-10-05T13_17_39_903Z-debug.log

这是我的代码：

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

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


  const pickImage = async () => {
    let result = await ImagePicker.launchImageLibraryAsync({
      mediaTypes: ImagePicker.MediaTypeOptions.Images,
      allowsEditing:true
    })

    if(!result.cancelled){
      setImage(result.uri)
    }
  }

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button title="Click here to pick an image" onPress={pickImage} />
      {image && <Image source={{ uri:image }} style={{ width:200, height:200}}/>}
    </View>
  );
}

我正在关注一个教程，所以它应该可以工作，但事实并非如此。请帮忙。谢谢

Answer 1

对于弃用警告，它看起来可能源于新版本的 webpack。我建议在你的 package.json 文件中安装最新版本，目前是 5.56.1。如果这不起作用，version "5.52.1" 可能是一个解决方案。

... 
"dependencies":{
    "webpack": "5.56.1"
  },
...

查看Expo's Website 上的文档后，看起来它们提供了一个很好的使用示例，可​​以捕获权限问题和安装步骤。你有没有尝试过这样的事情：

expo install expo-image-picker

^ 确保你也运行了 expo install 命令。 （我已经更改了下面的函数名称以匹配您的用例）

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

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

  useEffect(() => {
    (async () => {
      if (Platform.OS !== 'web') {
        const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
        if (status !== 'granted') {
          alert('Sorry, we need camera roll permissions to make this work!');
        }
      }
    })();
  }, []);

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

    console.log(result);

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

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