React Native，无效的道具来源 [英] React Native, Invalid Prop source

问题描述

我正在尝试在我的主页中添加帖子.它正在添加帖子但不在主屏幕中显示图像.我尝试了一些东西，但仍然得到同样的错误:-

I'm trying to add post in my home feed. It's adding post but not displaying image in home screen. I tried somethings but still getting same error:-

1. 通过在 state= {image:null} 中设置图像，我在 formImage.js 中 this.state.image 而不是 this.props.image
2. 我厌倦了在 addPost 中给图像道具值 image={value.values.image} 仍然没有工作
3. 有人建议我在 addPost 中我应该给 image: "" 而不是 image: null 但它给出了错误字符串应该在 Text 组件中呈现

1. I this.state.image instead of this.props.image in formImage.js by setting image in state= {image:null}
2. I tired to give image prop value in addPost image={value.values.image} still didn't work
3. someone suggested me that in addPost I should give image: "" instead of image: null but it gives error string should be render in Text component

我很挣扎，请有人帮忙

下面是我的代码

card.js

class Card extends Component {
  render() {
    return (
      <TouchableWithoutFeedback onPress={this.props.onPress}>
        <View style={styles.container}>{this.props.children}</View>
      </TouchableWithoutFeedback>
    );
  }
}

FormImage.js

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

 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 && 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.log 值

conse.log value

Object {
  "des": "Ggdyryt gfyry fufhtud",
  "image": "file:/data/user/0/host.exp.exponent/cache/ExperienceData/%2540s.kanwarjeet%252FtaskProject/ImagePicker/cf30b583-9f8f-4600-9bf2-cca33d5ead6c.jpg",
  "key": "0.01677881521271496",
  "title": "Fhfvcv",
}

this.state.post

this.state.post

` Object {
    "des": "He's a good boi and every one know it.",
    "image": 19,
    "key": "1",
    "title": "A Good Boi",
  },`

错误:- 警告:道具类型失败:提供给图像"的道具来源"无效.

推荐答案

试试这个:

this.props.formikProps.setFieldValue("image", { uri: result.uri });

来自网络链接或存储链接的图像需要为

Images from a web link or a storage link need to be as

source={{uri: [the link]}}

这篇关于React Native，无效的道具来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！