reactjs - 从后台返回时 react native 图像消失

Question

标题已经说明了一切。当我的 React Native 应用程序在后台运行一段时间后返回时，所有(或至少部分)指向外部 uri 的 Image 元素将变为空白。

我认为 iOS 可能会夺走应用程序的内存，因此我尝试让应用程序重新渲染 - 并重新加载这些图像 - 当它变为事件状态时:

React.AppStateIOS.addEventListener('change', (newState) => {
    if(newState === "active") {
        this.forceUpdate();
    }
});

但是虽然它确实重新渲染，但它不会重新加载图像。

这是怎么回事？

Answer 1

我在处理 GIF 时也遇到了同样的问题。看起来这是一个 React Native 的错误，如下所示:

https://github.com/facebook/react-native/issues/4606

我想出了一个解决方法，用于存储 AppState:

constructor(props) {
  super(props);
  this.state = {
    appState: 'active'
  };
  AppState.addEventListener('change', newState => this.setState({ appState: newState }));
}

然后，当 AppState 为 active 时，我仅使用正确的 source 渲染图像，以便当它进入 inactive 状态时 或 background 的 Image 为空白，并且在移回到 active 时被迫重新渲染:

render() {
  return <Image source={{ uri: this.state.appState === 'active' ? this.props.imageUrl : '' }} />;
}

我使用的实际代码有点不同，因为我使用 redux 来处理我的应用程序状态，但这应该工作相同。