组件未按预期在本机反应中呈现图像

Question

我正在为我的应用程序设计个人资料图片，为此我设计了一个名为ProfilePhoto的自定义可重用组件。 我在Profile父屏幕中使用该组件，如下面我的代码所示。 最初，没有从图库中选择个人资料图片，也没有任何渲染，这很好。 但是在我从图库中选择了一个图像（以证明我记录了路径）后，它没有按预期出现在组件中。

我的代码：

//Parent - Profile Screen
class ProfileScreen extends Component {
  constructor(props) {
    super(props);
    console.log('PROFILE SCREEN');
    console.log(auth().currentUser);

    this.state = {
      image: {
        uri: null, //' '
        width: null,
        height: null,
        mime: null,
      },
    };
  }

  renderImage(image) {
    return <ProfilePhoto diameter={228} borderWidth={5} image={image} />; //Custom Component
  }

  pickSingleWithCamera(cropping, mediaType = 'photo') {
    ImagePicker.openPicker({
      cropping: cropping,
      width: 228,
      height: 228,
      includeExif: true,
      mediaType,
      cropperCircleOverlay: true,
    })
      .then(image => {
        console.log('received image', image);
        console.log('image path: ', image.path);
        this.setState({
          image: {
            uri: image.path,
            width: image.width,
            height: image.height,
            mime: image.mime,
          },
          images: null,
        });
      })
      .then(async () => {
        console.log('Uploading...');
        this.uploadImage(this.state.image.uri);
      })
      .catch(e => alert(e));
  }

  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <ScrollView>
          <Text>Profile Screen</Text>
          <View>
            {this.state.image ? this.renderImage(this.state.image) : null}
          </View>
          <Button
            title="Pick Image"
            onPress={() => this.pickSingleWithCamera(true)}
          />
        </ScrollView>
      </View>
    );
  }
}


export default ProfileScreen;

//Custom Component - ProfilePhoto
class ProfilePhoto extends Component {
  constructor(props) {
    super(props);

    this.diameter = this.props.diameter;
    this.borderWidth = this.props.borderWidth;
    this.image = this.props.image || null;
    console.log('image: ', this.image);
  }
  render() {
    return (
      <View
        style={{
          width: this.diameter,
          height: this.diameter,
          borderRadius: this.diameter / 2,
          borderWidth: this.borderWidth,
          borderColor: '#00A1ED',
          shadowColor: '#00A1ED67',
          shadowOffset: {width: 0, height: 7},
          shadowRadius: 6,
        }}>
        <Image
          source={this.image}
          style={{
            width: this.diameter,
            height: this.diameter,
            borderRadius: this.diameter / 2,
          }}
        />
      </View>
    );
  }
}

export default ProfilePhoto;

我的日志：

//Initial Log
image:  {"height": null, "mime": null, "uri": null, "width": null}
//After Picking image
 image:  {"height": 228, "mime": "image/jpeg", "uri": "file:///storage/emulated/0/Pictures/e56f5507-3e45-409d-990f-c88812ff2c4b.jpg", "width": 228}

非常感谢帮助。

Answer 1

应该是this.renderImage(this.state.image.uri)而不是this.renderImage(this.state.image) ？

RN <Image/>标签的source部分应该是一个 uri 而不是一个对象。

---

更改上述内容后，您的 ProfilePhoto 组件中的this.props.image应该是一个可以为null或string的 uri 。 现在尝试：

<Image
  source={this.props.image? this.props.image : null}
  style={{
     width: this.diameter,
     height: this.diameter,
     borderRadius: this.diameter / 2,
  }}
/>

并删除this.image = this.props.image || null; this.image = this.props.image || null; 在构造函数中

---

更新：很高兴它有效，在这里更新原因以便任何潜在读者更容易阅读

原因是this.props.image被重新分配给局部变量this.image ，因为 UI 依赖于this.image ，它不是state / props ，它不会反映图像源的任何变化

Answer 2

尝试： source={{ uri: this.image.uri }}