React Native 元件的匯出和匯入

2021-08-01 14:03:12 字數 791 閱讀 1571

在react-native 中如何自己定義乙個元件是一件非常容易的事情。

下面是構建元件的幾種方式。

在es5中主要使用 module.exports=hellocomponent; 進行元件的匯出

一、元件的匯出

第一種方式:(es6)

/**

* es6 元件的建立

*/ export default class hellocomponent extends component)}

}

第二種方式:(es5)

/**

* es 5 元件的建立

*/var hellocomponent=react.createclass()}

});module.exports=hellocomponent;

第三種方式:(函式式)

/**

* 函式式 組建的建立

* 無狀態,無法使用this

*/function hellocomponent(props) ;

}module.exports=hellocomponent;

二、元件的匯入

import hellocomponent from "./hello"

在進行匯入時 使用關鍵字 import  from  、便可以把乙個元件進行匯入  

注意: from 「 ./」  路徑的書寫

./  當前目錄下(同一級目錄)

../  父級目錄

React Native 元件集合

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

ReactNative元件匯出

如果對rn開發有一定的了解的話,就會發現,reactnative提供的元件不能完全滿足開發的需求,就需要自定義一些元件,那麼如何匯出全域性的自定義元件呢?元件匯出有兩種形式 開發者一般使用預設元件匯出 首先在專案下面新建乙個資料夾rn design rn design就是乙個自己的元件庫類似於rea...

react native引導畫面元件

rn viewpager ios android react native material design android import from rn viewpager 引入必要依賴元件,其餘元件自行引入 style 必須flex 1 style 自定義右側頭部按鈕 style style 跳過...