Question

我正在使用react native创建一个Android应用程序。该应用程序使用java /本机代码进行图像处理。

该应用程序有一个图像组件，在点击时调用一个java函数，该函数创建一个图像并将其保存到内部存储并返回URI。（结果图像可能不同）

示例代码为：

FileOutputStream out = null;
try {
    out = new FileOutputStream(imgPath);
    resultMap.compress(Bitmap.CompressFormat.JPEG, 100, out);
} catch (Exception e) {
    finishCallback.invoke(false);
    Toast.makeText(getReactApplicationContext(), e.getMessage(), Toast.LENGTH_LONG).show();
    e.printStackTrace();
    return;
} finally {
    try {
        out.close();
    } catch (IOException e) {
        finishCallback.invoke(false);
        Toast.makeText(getReactApplicationContext(), e.getMessage(), Toast.LENGTH_LONG).show();
        e.printStackTrace();
        return;
    }
}

finishCallback.invoke(true,imgPath.toURI().toString());

接收方应更新图像组件以显示已保存的图像。

当我第一次运行它时它工作正常但是当我再次运行它时，即使存储中的图像已经改变，组件也不会被更新。

为了更新视图，我需要关闭应用程序并重新启动它，告诉它显示存储中保存的内容，然后显示更改。

只有在我之前已经使用过返回的URI时才会发生这种情况，尽管我已经检查并确保删除旧图像并且有一个新图像。

接收方看起来像这样：

（JniActivity.fillDoor是负责更新存储中图像的java函数）

  onSelectFillImage = (source) => {
  JniActivity.fillDoor(
  this.state.doorImageSource.uri,
  source.uri,
  (isDone, picURI) => {
    Alert.alert("is done: " + isDone);
    if (isDone) {

      const fixed = picURI

      const source1 = { uri: fixed };

      this.setState({
        filledDoorImageSource: source1
      });
    }
  }
);

感谢您的帮助！

Answer 1

所以就像你说的那样，即使图像本身已经改变，网址也是一样的。 React本机组件和纯组件对更新进行低级别检查。这意味着他们将检查新道具是否具有与旧道具相同的值，并且在您的情况下，因为网址没有改变，它获得相同的值并且将决定它不需要更新。作为一个解决方案，你可以做的是，你的状态中还有一个标志，表示图像是否应该重新呈现（类似于shouldReload：boolean），每当你的JAVA函数返回一个url切换标志来制作你的图像重新呈现。

Answer 2

在骚扰这个问题之后，结果问题是组件缓存图像。

只要您使用相同的URI，组件就不会转向服务器来更新图像，而宁愿使用缓存的信息。

Althougth有一些方法可以告诉组件不要从我的理解中缓存图像，没有办法保证100％的组件不会缓存你最好的东西。

最快的解决方案是在图像名称中添加一个大的随机数，以确保URI永远不会重复（同时确保删除所有以前不再需要的数据）。

示例代码：

String ImageName += Integer.toString(Math.round(Math.random()*1000000000);

Answer 3

您可以要求通过在url中添加随机字符串作为参数来做出反应以渲染新图像。如果参数更改，它将重新渲染新图像，而不是缓存的图像。

这是我的做法，

file://${store.root.registerImagePath}/${member.userId}.jpg?time=${new Date()}

内存中的图像更新不会反映本机图像组件的反应

3 个答案: