如何从存储在变量中的路径延迟加载 React Native 模块

Question

I've been trying to load a React Native component dynamically, but to no success. It seems like React Native doesn't like it at all when you try passing it a module path stored in a variable:

This works very well - React.lazy :

const OtherComponent = React.lazy(() => import('./path/to/my/module'));

This also works like a charm Full dynamic import: - Full dynamic import: @loadable/component

(npm @loadable/component)

import loadable from '@loadable/component'
const AsyncPage = loadable(props => import('./path/to/my/module'))

but try changing any to this:

var myModulePath = './path/to/my/module';  

const AsyncPage = loadable(props => import(myModulePath))

or this:

const OtherComponent = React.lazy(() => import(myModulePath));

and all goes crazy!

How can I go about loading a module dynamically, say at runtime , or just have the path briefly held in a variable, instead of passing it as a string literal

From the documentation ( Full dynamic import: @loadable/component ),

import loadable from '@loadable/component'
const AsyncPage = loadable(props => import(`./${props.page}`))

a dynamically generated path should work, but my React Native attempts don't.

Are there any ideas out there?

Thank you all in advance.

Answer 1

You can do it using https://github.com/microsoft/react-native-code-push

About lazy loading, it is not needed if you use the Hermes JS engine. Otherwise, you can use RAM bundler: https://reactnative.dev/docs/ram-bundles-inline-requires