TypeError： onChangeImage 不是一个函数。(在'onChangeImage(result.uri)'中，'onChangeImage'未定义)]

Question

我是应用程序开发和React Native的新手，我正在按照教程编写代码。我有一个打开手机图库的图像选择器，但是当我选择图像时，我每次都会得到这个错误。

Error reading an image [TypeError: onChangeImage is not a function. (In 'onChangeImage(result.uri)', 'onChangeImage' is undefined)]

这是我的ImageInput.js脚本:

import React, { useEffect } from "react";
import {
View,
StyleSheet,
Image,
TouchableWithoutFeedback,
Alert,
} from "react-native";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import * as ImagePicker from "expo-image-picker";
import colors from "../config/colors";
function ImageInput({ imageUri, onChangeImage }) {
useEffect(() => {
requestPermission();
}, []);
const requestPermission = async () => {
const { granted } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!granted) alert("You need to enable permission to access the library.");
};
const handlePress = () => {
if (!imageUri) selectImage();
else
Alert.alert("Delete", "Are you sure you want to delete this image?", [
{ text: "Yes", onPress: () => onChangeImage(null) },
{ text: "No" },
]);
};
const selectImage = async () => {
try {
const result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
quality: 0.5,
});
if (!result.cancelled) onChangeImage(result.uri);
} catch (error) {
console.log("Error reading an image", error);
throw error;
}
};
return (
<TouchableWithoutFeedback onPress={handlePress}>
<View style={styles.container}>
{!imageUri && (
<MaterialCommunityIcons
color={colors.medium}
name="camera"
size={40}
/>
)}
{imageUri && <Image source={{ uri: imageUri }} style={styles.image} />}
</View>
</TouchableWithoutFeedback>
);
}
const styles = StyleSheet.create({
container: {
alignItems: "center",
backgroundColor: colors.light,
borderRadius: 15,
height: 100,
justifyContent: "center",
marginVertical: 10,
overflow: "hidden",
width: 100,
},
image: {
height: "100%",
width: "100%",
},
});
export default ImageInput;

这是App.js脚本:

import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
Button,
Alert
} from 'react-native';
import Screen from "./app/components/Screen";
//import * as ImagePicker from "./app/components/ImagePicker";
import * as ImagePicker from "expo-image-picker";
import ImageInput from "./app/components/ImageInput";

export default function App() {
const [imageUri, setImageUri]= useState();
const requestPermission=async () => { 
const{ granted } = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!granted)
alert('You need to enable permissions to access the library')
}
useEffect(()=> {
requestPermission();
},[]);
const selectImage = async () => {
try {
const result= await ImagePicker.launchImageLibraryAsync();
if(!result.cancelled)
setImageUri(result.uri);
} catch (error) {
console.log('Error Reading an Image')
}
}
return <Screen>
<Button title ="Select Image" onPress={selectImage} />
<Image source = {{uri: imageUri }} style={{ width: 200, height: 200 }} />
<ImageInput />
</Screen>;
}

这是我在终端得到的结果:

Error reading an image [TypeError: onChangeImage is not a function. (In 'onChangeImage(result.uri)', 'onChangeImage' is undefined)] 
[Unhandled promise rejection: TypeError: onChangeImage is not a function. (In 'onChangeImage(result.uri)', 'onChangeImage' is undefined)]
at [e-mail]:86:13 in tryCatch
at [e-mail]:66:31 in <anonymous>
at [e-mail]:86:13 in tryCatch
at [e-mail]:124:27 in invoke
at [e-mail]:130:16 in PromiseImpl.resolve.then$argument_0
at node_modulesreact-nativenode_modulespromisesetimmediatecore.js:37:13 in tryCallOne
at node_modulesreact-nativenode_modulespromisesetimmediatecore.js:123:24 in setImmediate$argument_0
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:248:12 in _allocateCallback$argument_0
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:112:14 in _callTimer
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:162:14 in _callReactNativeMicrotasksPass
at node_modulesreact-nativeLibrariesCoreTimersJSTimers.js:413:41 in callReactNativeMicrotasks
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:391:6 in __callReactNativeMicrotasks
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:133:6 in __guard$argument_0
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:368:10 in __guard
at node_modulesreact-nativeLibrariesBatchedBridgeMessageQueue.js:132:4 in flushedQueue

我试着按照提供给这个问题的答案来修复它，但它不适合我。

Answer 1

你必须在App.js中声明

export default function App() {
// ...
return (
<Screen>
<Button title="Select Image" onPress={selectImage} />
<Image source={{ uri: imageUri }} style={{ width: 200, height: 200 }} />
<ImageInput
imageUri={any}
onChangeImage={() => {
// functions
}}
/>
</Screen>
);
}