react動態引入組件，ReactNative組件導出

前言

如果對RN開發有一定的了解的話，就會發現，ReactNative提供的組件不能完全滿足開發的需求，就需要自定義一些組件，那么如何導出全局的自定義組件呢？

組件的導出

組件導出有兩種形式：

• 默認組件導出
• 非默認組件導出

react動態引入組件？開發者一般使用默認組件導出

首先在項目下面新建一個文件夾rn-design

rn-design就是一個自己的組件庫類似于react-native的調用方式

react native新架構，在rn-design下聲明一個index.js文件，用來導出封裝的組件類

export { default as Radio } from "./radio/index";
export { default as Toast } from "./toast/index";

接下來在你封裝的每個子組件中都要新建一個index.js文件，用來導出你的組件

import Radio from "./radio";
export default Radio;

目錄結構如下：

reactnative框架、項目組調用

import { Radio, Toast } from "@/rn-design";

組件導出的關鍵字

//一個文件里面只能出現一次
export default
export default class RadioModal extends Component

不加default是就是非默認導出

export class RadioModal extends Component

在一個js文件里面可以聲明多個組件類，都可以用export導出,如：template.js

export class RadioModal extends Component{}
export class Toast extends Component

當然export還可以輸出一些常量，function方法等。

文件引用時：
1. 使用非默認組件導出的 就是說導出時沒有加default的 需要使用{}，并且組件名必須和export輸出的class名一致

import { RadioModal, Toast } from "./template"

1. 使用默認組件定義方式導出的 就是加了default的，此時就不需要用{}引入了

import RadioModal from "./template"

還可以給組件起一個別名：

import Radio from "./template"

1. 每個文件里面自能有一個default組件，但是可以包含其他非default組件

export default class RadioModal extends Component{}
export class Test extends Component{}

組件引用時：

import RadioModal, { Test } from "./template"

總結

1. 
   
2. 有default和沒有default的區別
   

有default在引用時可以自定義名稱，沒有default時需要使用{}括起來且必須和class類名一致

• 每個文件里面只能有一個default組件，但是可以有多個非default組件