在 React Native 中重置内部 android 图像缓存

Question

I wanted to consulate about a problem using the image library in React Native:

When doing a fetch of the data I get a Json with the urls of the images and they are shown in the screen (the images), if I change the urls of the images in the Json in the new fetch the new Json is downloaded but the images are not update in the view (as if there was an internal cache of android).

Is it possible to only erase the image cache without any external libraries? Or which library do you recommend to use in this case?

Thank you very much, I hope the answer.

Answer 1

To my knowledge react-native doesn't support clearing cache out of the box. What you can do is a quick hack. You can append a random number (like current date in milliseconds) to the image uri that you want to force reload. Because the uri changed cached image will not be used.

Example

export default class App extends Component {
  render() {
    const uri = 'https://picsum.photos/200/300?date=' + (new Date()).getTime();
    return (
      <View style={styles.container}>
        <Image source={{uri}} style={{ width: 200, height: 300}} />
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone!
          Save to get a shareable url.
        </Text>
      </View>
    );
  }
} 

Answer 2

Try to append random string in url. I have fixed the same issue by adding random string.

'?t=' + Math.round(new Date().getTime() / 1000)

Follow this link for more info