Question

我使用react-native-image-progress呈现网络图片。按照说明操作，我还安装了react-native-progress。

这是我的组件（非常类似于示例）：

<Image
        source={{ uri: 'http://loremflickr.com/640/480/dog' }}
        indicator={ProgressCircle}
        indicatorProps={{
          showsText: true,
        }}
        style={{
          width: 320,
          height: 240,
        }}
 />

指示符 - 圆圈正常显示，但圆圈随机旋转，没有任何进展信号，也没有显示文字。过了一会儿，图片就会呈现出来。

我还尝试将indeterminate: false添加到indicatorProps。这次它显示文本但被锁定在0％;然后在一段时间后渲染图片。

我可能做错了什么？

Answer 1

问题缺少道具：progress。

我们需要像ref：RN-Progress Example

那样创建状态和动画

在字段indicator中，我们需要调用返回<Progress.Circle>

的函数

render() {
    return(
      <View style={styles.container}>
        <Image
        source={{ uri: 'http://loremflickr.com/640/480/dog' }}
        indicator={() => <Progress.Circle
            style={styles.progress}
            progress={this.state.progress}
            indeterminate={this.state.indeterminate}
        />}
        indicatorProps={{
          showsText: true,
        }}
        style={{
          width: 320,
          height: 240,
        }}
      />
      </View>
    );
  }

我尝试了它的工作，希望我的回答可以帮到你。

React-native-image-progress不会显示进度

1 个答案: