照片输入与世博会

Question

我正在尝试创建一个应用程序，允许您从设备中选择图像并将其加载到应用程序中。要做到这一点，我使用expo。我得到这个错误，不知道现在该怎么办。任何形式的帮助都是非常感激的。

这些是我安装的依赖项: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] DeprecationWarning: SingleEntryPlugin被重命名为EntryPlugin(使用node --trace-deprecation ...显示创建警告的位置)无效的选项对象。忽略插件已经使用一个与API不匹配的选项对象初始化模式。

• 选项应该是下列选项之一:对象{resourceRegExp, contextRegExp?} | object {checkResource}细节:
  • options缺少属性'resourceRegExp'。应该是:正则表达式→用于测试请求的RegExp。
  • options缺少属性'checkResource'。应该是:函数→资源和上下文的过滤函数。npm犯错!代码ELIFECYCLEnpm犯错!errno 1npm犯错!photo-input@0.1.0 start:node scripts/start.jsnpm犯错!退出状态1npm犯错!npm犯错!photo-input@0.1.0启动脚本失败。npm犯错!这可能不是npm的问题。上面可能有额外的日志输出。

npm犯错!这次运行的完整日志可以在下面找到:npm犯错!C:UsersgitukAppDataRoaming npm-cache_logs 2021 - 10 - 05 - t13_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

对于Deprecation警告，它看起来可能来自新版本的webpack。我建议在你的软件包中安装最新的版本。Json文件，目前是5.56.1。如果这不起作用，版本"5.52.1";也许是个解决办法。

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

看完世博网站上的文档后，看起来他们提供了一个很好的使用示例，可以捕获权限问题和安装步骤。你试过这样做吗?

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