react-native - 如何在 react-native 上按需加载组件？

Question

我的应用由 500 多个屏幕和 1000 多个全局组件组成。我需要按需加载组件，而不是第一次加载所有组件。例如，在“ReactJS”中是代码分离，react.lazy()概念就是针对这个问题的。在 react-native 中是如何实现的。如何在 react-native 中溢出组件和代码以减少应用程序的首次加载时间。

谢谢！

标签： react-native

Answer 1

使用动态组件名称

import React, { Component } from 'react';
import FooComponent from './foo-component';
import BarComponent from './bar-component';

class MyComponent extends Component {

components = {
    foo: FooComponent,
    bar: BarComponent
};

render() {
   const componentName='foo'
   const TagName = this.components[componentName];
   return <TagName />
}

}