React-Native 組件開發(fā)方法

前言

React Native的開發(fā)思路是通過組合各種組件來組織整個App，在大部分情況下通過組合View、Image等幾個基礎(chǔ)的組件，可以非常方便的實現(xiàn)各種復(fù)雜的跨平臺組件，不過在需要原生功能支持、對性能有要求的情況下還是需要進(jìn)行一定的原生的開發(fā)，合理的組件實現(xiàn)方式可以降低使用和跨平臺的成本。

（底層實現(xiàn)分析參見：React-Native 渲染實現(xiàn)分析，本文僅討論組件開發(fā)方法）

React Native組件開發(fā)

RN的組件開發(fā)有幾種方式，JS組件、Native功能組件、NativeUI組件。JS組件是僅使用React Native自帶的組件進(jìn)行組合實現(xiàn)的組件，優(yōu)勢是跨平臺方便，但受限于RN實現(xiàn)的效果，一些復(fù)雜需求無法實現(xiàn)。而Native組件要強大許多，不過需要考慮平臺差異，提供統(tǒng)一的接口難度要大一些。

JS組件（熟悉React可略過）

JS組件是指僅靠RN本身自帶的組件開發(fā)的組件，是RN下最基礎(chǔ)的開發(fā)方式，大部分的組件都是JS組件。最大的好處是可以低成本的跨平臺。JS組件的開發(fā)體驗跟React（Web）一致，區(qū)別在基礎(chǔ)標(biāo)簽不一樣，以及樣式定義方式不一樣。

一個例子，無網(wǎng)絡(luò)提示組件：

無網(wǎng)絡(luò)提示組件

（例子語言Typescript） 

// 組件的屬性定義 interface PropsDefine { // 組件寬度  width: number // 組件高度  height: number // 點擊刷新按鈕回調(diào)，可選 onClickRefresh?: () => void
}
export class NoNetwork extends React.Component<PropsDefine, {}> { // 組件無狀態(tài)，定義為空：{} // 組件的默認(rèn)屬性定義，單例，實例間共享 static defaultProps = {  onClickRefresh: () => { }
    }