React Native - 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

您可以要求() 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。

Answer 2

遵循，但对于使用 React 函数组件的人，您可以使用钩子来实现相同的结果。

此外，您可以使用 expo-app-loading 中的 AppLoading 组件来保持启动画面，直到一切准备就绪。

function useImages(images) {
  const [loaded, setLoaded] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    Asset.loadAsync(images)
      .then(() => setLoaded(true))
      .catch(setError);
  }, []);

  return [loaded, error];
}

export default function App() {
  const [imagesLoaded] = useImages([
      require('./assets/images/stock1.jpg'),      
      require('./assets/images/stock2.jpg'), 
      require('./assets/images/undraw1.png'), 
  ]);

  if (!imagesLoaded) {
    return <AppLoading />;
  }
  
  return <>...</>;
}

React Native - ImageBackground 延迟加载本地图像

ReactNative - ImageBackground load local image with a delay

delay-load

react-native

imagebackground