#javascript #reactjs #react-native
#javascript #reactjs #react-native
Вопрос:
Я пытаюсь добавить сообщение в свою домашнюю ленту. Он добавляет сообщение, но не отображает изображение на главном экране. Я пробовал что-то, но все равно получал ту же ошибку:-
- Я
this.state.image
вместоthis.props.image
в formImage.js установив изображение в состояние= {image:null} - Я устал указывать значение prop изображения в addPost, но все
image={value.values.image}
равно не работал - кто-то предложил мне, что в addPost я должен указать
image: ""
вместоimage: null
, но он выдает строку ошибки, которая должна отображаться в текстовом компоненте
Я очень сильно с этим борюсь, пожалуйста, кто-нибудь, помогите
ниже приведен мой код
card.js
class Card extends Component {
render() {
return (
<TouchableWithoutFeedback onPress={this.props.onPress}>
<View style={styles.container}>{this.props.children}</View>
</TouchableWithoutFeedback>
);
}
}
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>
);
AddPost.js
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} />
<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
extraData={this.state.post}
data={this.state.post}
renderItem={({ item }) => (
<>
<Card
title={item.title}
subTitle={item.des}
image={item.image}
onPress={() => this.props.navigation.navigate("Details", item)}
/>
</>
)}
/>
conse.значение журнала
Object {
"des": "Ggdyryt gfyry fufhtud",
"image": "file:/data/user/0/host.exp.exponent/cache/ExperienceData/%40s.kanwarjeet%2FtaskProject/ImagePicker/cf30b583-9f8f-4600-9bf2-cca33d5ead6c.jpg",
"key": "0.01677881521271496",
"title": "Fhfvcv",
}
this.state.post
` Object {
"des": "He's a good boi and every one know it.",
"image": 19,
"key": "1",
"title": "A Good Boi",
},`
Ошибка: — Warning: Failed prop type: Invalid prop 'source' supplied to 'Image'.
Комментарии:
1. Это:
<FormImage formikProps={value} />
предполагает, что есть толькоthis.props.formikProps
и ничего больше.2. итак, как я должен это исправить?
3. Я не знаю, может быть, это
this.props.formikProps.image
?4. не могли бы вы добавить к вопросу, что вы получаете из
console.log(values);
onSubmit
5. я уверен, что подожду…
Ответ №1:
Попробуйте это:
this.props.formikProps.setFieldValue("image", { uri: result.uri });
Изображения из веб-ссылки или ссылки на хранилище должны быть такими
source={{uri: [the link]}}