javascript - 如何仅在 View 内部的图像完成渲染时渲染 View ，同时显示渲染指示器？

Question

假设我们有以下代码块:

  <View>
    <Image
      source={{uri: this.props.image}}
      renderIndicator={() => <SimpleLoader />}
    />
    <Text>{this.props.title}</Text>
  </View>

它当前在图像上显示渲染动画，但显示 View 和文本，然后最终渲染图像。

我愿意:

1) 让 View 本身具有 <SimpleLoader />在渲染任何子项时显示

2) 确定所有子级何时完成渲染(特别是图像)，然后淡入 View 。

我正在阅读有关可能使用 componentDidMount 的回调的内容，但我不完全确定如何实现这一点。

Answer 1

一个简单的方法是使用 react-native-image-progress

手动执行此操作的一种方法是最初在状态中设置一个loaded: false属性，然后设置 onLoad将 Image 的属性传递给调用 setState({loaded: true}) 的函数。然后创建一个函数，例如 showImage()，它返回图像的 View 或加载指示器，具体取决于 state.loaded 分别为 true 或 false。在 render() 中，您可以调用 {this.showImage()}

要淡化图像，您可以使用 Animated将样式内图像的不透明度从 0 动画到 1。