Javascript 如何仅在视图内部的图像已完成渲染时渲染视图，同时显示渲染指示器？

假设我们有这段代码：

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

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

我想：

1在渲染任何子项时显示视图本身

2确定所有子对象何时完成渲染或图像，尤其是，然后淡入视图

---

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

一个简单的方法是使用

手动执行此操作的一种方法是，在初始状态下有一个loaded:false属性，然后将Image的prop设置为调用setState{loaded:true}的函数。然后创建一个函数，比如showImage，它根据state.loaded是true还是false分别返回图像或加载指示器的视图。在render中，可以调用{this.showImage}

---

要使图像淡入淡出，可以使用从0到1设置样式内图像不透明度的动画

我实际上已经在使用这个软件包了，这与实际的图像本身无关。我的困惑在于父组件如何知道子组件已完成加载，以及仅在加载图像时渲染父视图。我可以让图像淡入，并显示自定义渲染指示器。