ReactNative组件导出

前言

如果对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"

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. 有default和没有default的区别
   

有default在引用时可以自定义名称，没有default时需要使用{}括起来且必须和class类名一致

每个文件里面只能有一个default组件，但是可以有多个非default组件