如何实现 RAM bundle 和 Inline Requires react native [英] How to implement RAM bundle and Inline Requires react native

问题描述

我正在使用 react native 构建项目，但面临启动时间长的问题，我尝试遵循 https://reactnative.dev/docs/ram-bundles-inline-requires，但是关于 Investigating the Modules 以及如何只将必要的模块放在第一位并不是很清楚屏幕.我也找不到 index.(ios​​|android).js 文件(是 index.android.bundle).如果您能告诉我如何仅提取必要的模块并推荐有关实现该模块的文档或示例?

I am using react native to build project and I am facing a problem with long launch time, I try to follow https://reactnative.dev/docs/ram-bundles-inline-requires, however it is not so clear about Investigating the Loaded Modules, and how to put only the necessary modules for first screen. I am not also able to find index.(ios|android).js file (is it index.android.bundle). If you can tell me how to extract only necessary modules and recommend docs or examples about implementing that?

推荐答案

考虑到 官方文档，注意这个例子:

With considering the official documents, pay attention to this example:

您的应用中有一个 Main screen(视图)，例如 HomeScreen

You have a Main screen (view) in your app like HomeScreen

在您的主屏幕中，此页面中有越来越多的组件和逻辑，但假设我们有一个 SettingsModal.

In your HomeScreen, there are more and more components and logic in this page but assume we have a SettingsModal.

通常，modals 会在您触摸按钮时打开.

usually, modals will open when you touch a button.

无内联要求

您必须在模块的顶层将模态组件导入主屏幕

you have to import your modal component to your HomeScreen at the top level of your module

内联要求

当需要显示时，您将模态组件导入主屏幕！

you will import your modal component to your HomeScreen when it needs to show!

让我们用代码来做到这一点:

Let's do this with code:

没有内联要求的主屏幕

import React, {useState} from 'react'
import {View, Text, Pressable} from 'react-native'
import SettingsModal from 'components/modal'

function HomeScreen() {
    const [showModal, setShowModal] = useState(false)

    const handleShowModal = () => setShowModal(prevState => !prevState)
   
    return (
       <View>
          <Text> Home Screen </Text>

          <Pressable onPress={handleShowModal}>
              <Text> show settings </Text>             
          </Pressable >

          {
            showModal 
                ?  <SettingsModal />
                :  null
          }
       </View>
    )
}

在上面的例子中，我们在 HomeScreen 顶层导入了 SettingsModal 和 React 以及 View 和 Text...

In the above example, we import SettingsModal in our HomeScreen top level with React and View and Text...

带有内联要求的主屏幕

import React, {useState} from 'react'
import {View, Text, Pressable} from 'react-native'

let SettingsModal = null;

function HomeScreen() {
    const [showModal, setShowModal] = useState(false)

    const handleShowModal = prevState => {
         if (SettingsModal == null) {
             SettingsModal = require('components/modal').SettingsModal
         }
         
         setShowModal(prevState => !prevState)
    }
   
    return (
       <View>
          <Text> Home Screen </Text>

          <Pressable onPress={handleShowModal}>
              <Text> show settings </Text>             
          </Pressable >

          {
            showModal 
                ?  <SettingsModal />
                :  null
          }
       </View>
    )
}

在上面的例子中，我们检查 SettingsModal 是否还没有被导入，然后我们将这个组件导入到我们的 HomeScreen 文件中(在用户触摸显示设置按钮后)

In the above example, we check if SettingsModal has not been imported yet, then we will import this component to our HomeScreen file (after user touch the show settings button)

这篇关于如何实现 RAM bundle 和 Inline Requires react native的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！