react-native实现类似Vue的 <component :is="xxx"> 动态组件

// 组件
const Default = ({title, component}) =>
  	<div className="missing">missing component for: {component}</div>;
  
const Component1 = ({title}) => 
	<div className="first">{title}</div>;
  
const Component2 = ({title}) => 
	<div className="second">{title}</div>;

// 数据
const exampleData = [
    {
        title : 'first title',
        component : 'component1',
    },
    {
        title : 'second title',
        component : 'component2',
    },
    {
        title: 'Unknown Component',
        component : 'someUnknownComponent',
    }
]; 

// 数据和组件的映射关系
const componentMap = {
    component1 : Component1,
    component2 : Component2,
    default    : Default,
}

// 渲染
{
    exampleData.map( d => {
            const Component = componentMap[ d.component ] 
            || componentMap.default;

      return <Component {...d} />;
    } )
}