#javascript #reactjs #react-native
#javascript #reactjs #react-native
Вопрос:
Сбойный тип реквизита: неверный реквизит 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 amp;amp; (
<MaterialCommunityIcons
color={colors.medium}
name="camera"
size={40}
/>
)}
{this.props.image amp;amp; (
<Image style={styles.image} source={{ uri: this.props.image }} />
)}
</View>
</TouchableWithoutFeedback>
);
}
}
Я не знаю, почему он показывает эту ошибку, я поделюсь своим кодом formik ниже
AddPost.js
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 amp;amp; 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)}
/>
</>
может кто-нибудь сказать мне, что происходит, почему он не выбирает источник :/
Комментарии:
1. Скорее всего, это связано со значением
this.props.image
, поэтому попробуйте выйти из системы. Значение uri должно быть «строкой, представляющей идентификатор ресурса для изображения». Поэтому убедитесь, что это действительно так, и вы не передаете что-то еще. reactnative.dev/ docs/image .2. это средство выбора изображений, я не могу передать строку, которую я использовал, как указано в документе expo image picker
3. возможно, у вас есть изображение как null, в начальных значениях в formik.
4. мне нужно добавить image: null в состояние?