react-native - ReactNative - ImageBackground 延迟加载本地图像

Question

我注意到，当我运行react-native应用程序时，我使用标签设置为背景的图像会<ImageBackground>延迟近 2 秒加载，即使它们不是重图像（~100K）并且它们存储在本地。

我也读过这个答案，但它并没有解决我的问题。

这是我插入图像作为背景的简单代码：

<ImageBackground source={require('../images/ScanQR.png')} style={styles.backgroundImage}>
    <Text style={styles.domanda}>
      Example text
    </Text>
</ImageBackground>

Answer 1

您可以 require() App.js 中的图像之前加载它们。像这样做：

async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require('./assets/images/stock1.jpg'),      
      require('./assets/images/stock2.jpg'), 
      require('./assets/images/undraw1.png'), 
    ]),
    Font.loadAsync({
      // This is the font that we are using for our tab bar
      ...Ionicons.font,
      // We include SpaceMono because we use it in HomeScreen.js. Feel free to
      // remove this if you are not using it in your app      
      'open-sans-regular': require('./assets/fonts/OpenSans-Regular.ttf'),
      'open-sans-extrabold': require('./assets/fonts/OpenSans-ExtraBold.ttf'),
    }),
  ]);
}

我在这里使用 Expo，你不需要创建这个函数，它已经在 App.js 中，只需在 require() 函数中添加你的图像。

我不知道这在没有 Expo 的情况下是否适用于 React Native。