React Native 如何防止在Android上切换标签时图片闪烁答案

【问题标题】：React Native How to prevent images from flickering when switching tabs on AndroidReact Native 如何防止在Android上切换标签时图片闪烁
【发布时间】：2021-04-21 00:21:14
【问题描述】：

我正在实现一个带有标签导航的 React Native 应用程序。在“主页”选项卡中，大约有 30 张图像。当我切换到另一个选项卡然后返回“主页”时，图像会闪烁而不更改源。请参考下面的gif。

我不太确定，但我认为图像闪烁的原因是因为它已重新加载。这仅在 Android 上发生，并且在切换选项卡时发生。当我移动到同一选项卡中的另一个屏幕时，我找不到这个。请参考下面的gif。

我想让图像在加载后不闪烁。

【问题讨论】：

通常标签不会在后续访问时重新呈现。您在使用 Expo CLI 吗？
是的，我正在使用 Expo CLI
我使用github.com/DylanVann/react-native-fast-image作为图像，它比 react-native 的默认图像好得多，它也会自动缓存图像，但我认为它不会在 expo 中工作。
感谢@HardikChavda 希望世博会尽快支持react-native-fast-image。

标签： android react-native

【解决方案1】：

我希望您正在使用 Expo 的 Asset Lib。您可以在那里预加载图像，以便将它们缓存在设备中。你可以用expo install expo-asset安装它

import { useAssets } from 'expo-asset';
function App() {
  // Preload your images here
  const [assets] = useAssets([require('path/to/asset.jpg'), require('path/to/other.png')]);

  if (!assets) {
    // Return Loading Component (ActivityIndicator)
    return <AppLoading />;
  }

  return (
    <View>
      <Text>Loaded {assets.length} assets!</Text>
      <Image source={require('path/to/asset.jpg')} />
      <Image source={require('path/to/other.png')} />
    </View>
  );
}

有了代码，这应该不再发生

【讨论】：