Question

假设我们有这段代码：

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

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

我想：

1）在呈现任何子项目时，视图本身都会显示<SimpleLoader />

2）确定所有孩子何时完成渲染（或特别是图像），然后淡化视图。

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

Answer 1

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

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

要淡化图像，您可以使用Animated为样式中图像的不透明度设置0到1的动画。

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

1 个答案: