javascript - 反应本机,道具类型失败:提供给`Image`的无效道具`source`
问题描述
道具类型失败:source
提供给Image
我的道具无效,我在上传图片时遇到了该错误。我使用图像选择器来选择图像并使其成为组件,但它没有拾取下面的源代码是我的图像选择器 FormImage.js 代码
class FormImage extends Component {
state = {
hasCameraPermission: null,
};
async componentDidMount() {
const { status } = await Permissions.askAsync(Permissions.CAMERA_ROLL);
this.setState({ hasCameraPermission: status === "granted" });
}
_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
mediaTypes: ImagePicker.MediaTypeOptions.Images,
allowsEditing: true,
aspect: [4, 3],
});
if (!result.cancelled) {
this.setState({ image: result.uri });
this.props.formikProps.setFieldValue("image", result.uri);
}
};
render() {
return (
<TouchableWithoutFeedback onPress={this._pickImage}>
<View style={styles.container}>
{!this.props.image && (
<MaterialCommunityIcons
color={colors.medium}
name="camera"
size={40}
/>
)}
{this.props.image && (
<Image style={styles.image} source={{ uri: this.props.image }} />
)}
</View>
</TouchableWithoutFeedback>
);
}
}
我不知道为什么它显示错误我将在 AddPost.js 下面分享我的 formik 代码
const validationSchema = Yup.object({
title: Yup.string().required().min(5).max(15).label("Title"),
des: Yup.string().required().min(15).max(200).label("Description"),
image: Yup.mixed(),
});
class AddPost extends Component {
render() {
return (
<Formik
initialValues={{ title: "", des: "", image: null }}
onSubmit={(values, actions) => {
this.props.addPost(values);
console.log(values);
}}
validationSchema={validationSchema}
>
{(value) => (
<KeyboardAvoidingView
behavior="position"
keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 100}
>
<FormImage formikProps={value} image={value.values.image} />
<Text style={styles.error}>
{value.touched.image && value.errors.image}
</Text>
<TextInput
placeholder="Title"
onChangeText={value.handleChange("title")}
style={styles.input}
value={value.values.title}
onBlur={value.handleBlur("title")}
/>
下面是我的主屏幕代码 home.js
class Home extends Component {
state = {
modal: false,
post: [
{
key: "1",
title: "A Good Boi",
des: "He's a good boi and every one know it.",
image: require("../assets/dog.jpg"),
},
{
key: "2",
title: "John Cena",
des: "As you can see, You can't see me!",
image: require("../assets/cena.jpg"),
},
],
};
addPost = (posts) => {
posts.key = Math.random().toString();
this.setState((prevState) => {
return {
post: [...prevState.post, posts],
modal: false,
};
});
};
render() {
return (
<Screen style={styles.screen}>
<Modal visible={this.state.modal} animationType="slide">
<TouchableWithoutFeedback onPress={Keyboard.dismiss}>
<View style={styles.modalContainer}>
<AddPost addPost={this.addPost} />
</View>
</TouchableWithoutFeedback>
</Modal>
<FlatList
data={this.state.post}
renderItem={({ item }) => (
<>
<Card
title={item.title}
subTitle={item.des}
image={item.image}
onPress={() => this.props.navigation.navigate("Details", item)}
/>
</>
有人可以告诉我为什么不选择来源:/
解决方案
推荐阅读
- sql - Windows Server2016 上的 SQL Server Management Studio 17.9 安装失败
- android - TensorFlow 对象检测在 Xamarin Android 上失败并出现重塑问题
- javascript - 在网站上实现动态列表的最有效方法
- java - 嵌套的while循环不会要求再次正确运行程序
- php - 使用 Ckeditor 编辑数据库中保存的数据
- python - 使用没有 ValueError 的 tkinter 模块时如何导入函数
- java - 如何将textview中的2个单词左对齐和右对齐
- java - 如何将两个子actor的总和结果返回给父级并打印出来
- typescript - TS2307:找不到模块
- mongodb - bulk 正在替换其他字段,即使声明了 upsert