Question

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

我也读过this answer，但并不能解决我的问题。

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

<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中使用。

ReactNative-ImageBackground延迟加载本地图像

1 个答案: