从后台返回时反应本机图像消失

Question

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

我认为 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 }));
}

然后，我仅在 是 时使用正确的图像渲染图像，以便source当它进入或是空白时，并且在移回 时被迫重新渲染：AppStateactiveinactivebackgroundImageactive

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

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