Question

我有一个头像组件，并且在其中包含以下XML

    <Image
      source={avatars && avatars[deferredKey]
        ? { uri: avatars[deferredKey] } : defaultAvatar}
      style={{
        width: size, height: size, borderRadius: size / 2, ...containerStyle,
      }}
      onError={this.onError}
    />

当应用程序加载化身为null时，因此defaultAvatar加载，然后在几秒钟后，该图像接收到新的道具，它应该切换到uri图像，但无法执行此操作。

当我将代码更改为

   <Image
      source={{ uri: avatars[deferredKey] }}
      style={{
        width: size, height: size, borderRadius: size / 2, ...containerStyle,
      }}
      onError={this.onError}
    />

然后，该组件将按预期方式工作，最初，头像将加载为空白，几秒钟后，它将正确加载uri图像。

该问题似乎仅在化身必须从本地存储的资产切换到uri时存在。

Answer 1

像往常一样，我为此进行了2天的战斗，然后在发布后立即找出答案。

我将代码编辑为仅使用prop defaultSource，它现在可以按预期运行

fp

Answer 2

我在这里找到了答案https://github.com/facebook/react-native/issues/9195。看来，它本质上是一个本机Image漏洞，已经存在了一段时间。

根据spec，您应该可以执行类似的操作

<Image source={{uri : myImage, cache: 'reload'}} />

但是即使那样也不行。

结果证明，自2016年以来一直在使用的最佳解决方案是在Image组件中添加一个密钥，该密钥指向状态的源值：

key={this.state.source.uri}

当道具更改时，反应本机图像组件不会在本地图像和uri之间切换

2 个答案: