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"

使用默认组件定义方式导出的就是加了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组件

ReactNative组件导出相关推荐

三维荧光平行因子学习记录--（四）平行因子组件导出--（一）
三维荧光平行因子学习记录–(四)平行因子组件导出–(一) 注:本文仅作为自己的学习记录以备以后复习查阅本文参考博客链接: https://zhuanlan.zhihu.com/p/377996430 ...
Android安全检测 - 组件导出风险
市面上有很多的在线Android安全扫描工具,比如梆梆的安全检测平台.360显危镜.爱加密安全检测平台等等,自动化工具出来的结果大多数情况下都是非准确的,都需要人工进行复核.这一章我们来学习组件导出风 ...
android 组件导出安全,App安全检测实践基础：组件安全（二）
系列文章目录 Activity简述 Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务.Activity中所有操作都与用户密切相关,是一个负责与用户交互的组件,可以通 ...
react-native 组件之间传值
1.通过 AsyncStorage 将值保存在本地(最低端的方法) import {AsyncStorage, } from 'react-native';// 保存 IP AsyncStorage. ...
React-Native 组件开发方法
前言 React Native的开发思路是通过组合各种组件来组织整个App,在大部分情况下通过组合View.Image等几个基础的组件,可以非常方便的实现各种复杂的跨平台组件,不过在需要原生功能支持. ...
React-Native组件之Text内文字垂直居中方案
1 style: { 2 height: 100, 3 textAlign: 'center', 4 textAlignVertical: 'center', 5 } 以上方法在Android上显示水 ...
EasyExcel组件导出Excel文件
一.问题出现最近需要实现Excel文件的导出,于是乎选择了EasyExcel组件来做这件事. 二.代码实现 ·1.依赖导入 <dependency><groupId>com. ...
React 函数组件导出自定义方法的办法说明
在进行React开发时,函数组件是比较方便的,由于函数组件没有this指针,因此如果想在父组件里调用函数型子组件的方法,就需要用到React.useImperativeHandle 这个帮助函数. 办 ...
Android 12适配安全组件导出设置`android:exported` 指定显式值”
如何解决编译错误:"面向 Android 12 及更高版本的应用需要为 android:exported 指定显式值"问题如果您的应用针对 Android12,则文档说: 如果您 ...

ReactNative组件导出

前言

组件的导出

总结

ReactNative组件导出相关推荐

最新文章

热门文章