ReactNative元件匯出

2021-08-21 18:22:14 字數 2008 閱讀 3575

如果對rn開發有一定的了解的話，就會發現，reactnative提供的元件不能完全滿足開發的需求，就需要自定義一些元件，那麼如何匯出全域性的自定義元件呢？

元件匯出有兩種形式：

開發者一般使用預設元件匯出

首先在專案下面新建乙個資料夾rn-design

rn-design就是乙個自己的元件庫類似於react-native的呼叫方式

在rn-design下宣告乙個index.js檔案，用來匯出封裝的元件類

export  from


"./radio/index";


export  from


"./toast/index";
接下來在你封裝的每個子元件中都要新建乙個index.js檔案，用來匯出你的元件

import radio from "./radio";


export


default radio;
目錄結構如下：

專案組呼叫

import  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  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,  from


"./template"
有default和沒有default的區別

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

React Native 元件的匯出和匯入

在react native 中如何自己定義乙個元件是一件非常容易的事情。下面是構建元件的幾種方式。在es5中主要使用 module.exports hellocomponent 進行元件的匯出 一 元件的匯出 第一種方式 es6 es6 元件的建立 export default class hell...

React Native匯入匯出

元件 exportdefaultclasstestcomponentextendscomponent 使用export default關鍵字，來匯出預設的元件。importtestcomponentfrom testcomponent 變數和常亮 變數exportvarname xiaoming 常...

React Native 元件集合

1 display 該屬性用來指定元素是否為伸縮容器 flex inline flex flex用於產生塊級伸縮容器 inline flex用於產生行級伸縮容器 2 flexdirection 該屬性指定主軸方向 row row reverse column column reverse row 預...