react-native - 在开发和生产模式下,Expo和React-Native的 Assets 下载机制是什么?

标签 react-native expo metro-bundler

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

我知道的信息是,一旦您构建代码,expo就会准备一个捆绑包,其中同时包含javascript(编译后的代码)和 Assets 。

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

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

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

  • 如果生产模式的行为相同,那么它将从哪里下载 Assets ?
  • 如果生产模式与开发模式不同,为什么将开发模式安排为不同的行为?
  • 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并不容易更改。但是,如果您通过网络运行它,更改速度会更快。

    博览会文档说明here:

    For images that saved to the local filesytem, use Asset.fromModule(image).downloadAsync() to download and cache the image. There is also a loadAsync() helper method to cache a batch of assets.



    这也与上面的问题有关,如果图像在本地文件系统中,为什么还要缓存图像呢?

    可以在here中看到,也向世博论坛添加了相同的问题。链接两者,以便将来的访客找到任何可能的答案。

    最佳答案

    为了后代,这是世博工程师在世博论坛上发布的答案:

    During development in the Expo client, the images will be downloaded from your local environment. This will take longer due to the all the extra processes that run during Development Mode such as validation checks, remote debugging, hot reloading if enabled, etc. You can read more about this here: https://docs.expo.io/versions/v34.0.0/workflow/development-mode/

    When running a published project within the Expo Client, it will fetch your assets from the CDN (CloudFront) in which case you’ll want to make use of the AppLoading module to pre-fetch the assets and only hide the splash screen after all assets have been loaded into memory.

    When building a standalone application, you have the option to bundle your assets into the binary (which most should use unless they have an abnormal amount of assets or assets with heavy file sizes) that will result in the assets being loaded into memory much faster since they will be fetched from the local disk rather than making a network request to the CDN.

    关于react-native - 在开发和生产模式下,Expo和React-Native的 Assets 下载机制是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57761316/

    相关文章:

    react-native - 如何将 View 定位在 ScrollView 的底部?

    react-native - 专注于react-native-web(expo)时更改TextInput的边框颜色

    css - 如何仅在 native react 中更改事件按钮的颜色

    javascript - 使用 react native 日期时间选择器两次会出现错误?

    react-native - 带视频流的 Flatlist、React Native、Expo 在 Android 上遇到内存问题

    javascript - 如何在 Metro 中获取 React Native 变体?

    react-native - Metro bundler : Error: EISDIR: illegal operation on a directory, 读取

    react-native - 将 Relay 与 React-Native 结合使用时的条件片段或嵌入的根容器

    react-native - 打开键盘时 ScrollView (React Native/Expo)

    android - 在不同的端口运行多个 react-native 应用程序