react-native中如何实现vue中的动态组件？

Question

Vue中是根据subModules里有的type值来加载对应的组件，不是组件切换，是只渲染数据里有的组件。
在react-native中有什么好的方案吗？

const subModules = [{type:'A'},{type:'B'}]

const CurrentCompoent = {
  A: markRaw(defineAsyncComponent(() => import('/src/components/a.vue'))),
  B: markRaw(defineAsyncComponent(() => import('/src/components/b.vue'))),
  C: markRaw(defineAsyncComponent(() => import('/src/components/c.vue')))
  //....
}

<div v-for="item in subModules">
    <component :is="CurrentCompoent[item.type]" />
</div>
//结果是：渲染a.vue和b.vue

Answer 1

等不了了，我自己琢磨出一个方案，请大神指正

//导入组件
import ComponentWork from './ComponentWork';
import ComponentEdu from './ComponentEdu';
import ComponentPro from './ComponentPro';

//组件和数据映射关系
const componentMap = {
  work: ComponentWork,
  edu: ComponentEdu,
  pro: ComponentPro,
};

//subModules是从后台返回的数据，根据type值，显示对应的组件
subModules.map(s => {
  const Component = componentMap[s.type];
  return <Component />;
})