前言
如果对RN开发有一定的了解的话,就会发现,ReactNative提供的组件不能完全满足开发的需求,就需要自定义一些组件,那么如何导出全局的自定义组件呢?
组件的导出
组件导出有两种形式:
- 默认组件导出
- 非默认组件导出
开发者一般使用默认组件导出
首先在项目下面新建一个文件夹rn-design
rn-design就是一个自己的组件库类似于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;
目录结构如下:
项目组调用
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"
- 使用默认组件定义方式导出的 就是加了default的,此时就不需要用{}引入了
import RadioModal from "./template"
还可以给组件起一个别名:
import Radio from "./template"
- 每个文件里面自能有一个default组件,但是可以包含其他非default组件
export default class RadioModal extends Component{}
export class Test extends Component{}
组件引用时:
import RadioModal, { Test } from "./template"
总结
- 有default和没有default的区别
有default在引用时可以自定义名称,没有default时需要使用{}括起来且必须和class类名一致
- 每个文件里面只能有一个default组件,但是可以有多个非default组件