Question

我对Expo和React-Native的机制，它们如何下载资产感到困惑。

我知道的信息是，一旦您构建代码，expo就会准备一个捆绑包，其中同时包含javascript（编译后的代码）和资产。

在调试会话期间，该捆绑包-整体上-首先由Expo客户端下载，然后启动该应用程序。这意味着一旦启动应用程序，代码中所有“导入”的资产都应就位。

另一方面，当我运行以下原子测试代码时，这是完全相反的。加载这些资产需要花费时间，就像它们是“延迟加载”一样。

所以我的问题是；行为开发模式相关吗？还是在生产模式下下载图像仍然需要时间？

如果生产模式的行为相同，那么它将从哪里下载资产？
如果生产模式与开发模式不同，为什么开发模式的排列方式会有所不同？

import * as React from 'react';
import { Text, View, StyleSheet, Image, Button } from 'react-native';
import Test0Img from './assets/test0.gif';
import Test1Img from './assets/test1.gif';

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      imageIndex: 0,
    };
  }

  render() {
    return (
      <View style={styles.container}>
        <Text></Text>
        <Text></Text>
        <Button
          onPress={() => {
            let l_newImageIndex = (this.state.imageIndex + 1) % 2;
            this.setState({ imageIndex: l_newImageIndex });
          }}
          title="Click to Change Image"
        />
        <Image
          source={this.state.imageIndex === 1 ? Test0Img : Test1Img}
          style={{
            width: '100%',
            height: '100%',
            resizeMode: 'contain',
          }}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

可以在此小吃中看到代码：https://snack.expo.io/@mehmetkaplan/assetdownloadtest

如果您在手机上运行此代码，很可能会发现动画gif并不容易更改。但是，如果您通过网络运行它，则更改速度会更快。

Expo文档说明here：

对于保存到本地文件系统中的图像，请使用Asset.fromModule（image）.downloadAsync（）下载并缓存该图像。还有一个loadAsync（）帮助器方法可以缓存一批资产。

这也与上述问题有关，如果图像在本地文件系统中，为什么还要缓存图像？

世博论坛也添加了相同的问题，here可能会出现。链接两者，以便将来的访客找到任何可能的答案。

Answer 1

对于后代，这是世博工程师在世博论坛上发布的答案：

在Expo客户端中进行开发期间，图像将从您的本地环境下载。由于在开发模式下会运行所有额外的过程，例如验证检查，远程调试，热重载（如果启用）等，因此这将花费更长的时间。您可以在此处了解更多信息：https://docs.expo.io/versions/v34.0.0/workflow/development-mode/

在Expo Client中运行已发布的项目时，它将从CDN（CloudFront）中获取您的资产，在这种情况下，您需要利用AppLoading模块来预获取资产，并且仅隐藏启动屏幕将所有资产加载到内存中之后。

在构建独立应用程序时，您可以选择将资产捆绑到二进制文件中（除非它们具有异常数量的资产或具有大文件大小的资产，否则应使用二进制文件），这将导致资产被加载到内存中因为它们将从本地磁盘中获取，而不是向CDN发出网络请求，因此速度要快得多。

在开发和生产模式下，Expo和React-Native的资产下载机制是什么？

1 个答案: