React-Native 組件開發(fā)方法
前言
React Native的開發(fā)思路是通過(guò)組合各種組件來(lái)組織整個(gè)App，在大部分情況下通過(guò)組合View、Image等幾個(gè)基礎(chǔ)的組件，可以非常方便的實(shí)現(xiàn)各種復(fù)雜的跨平臺(tái)組件，不過(guò)在需要原生功能支持、對(duì)性能有要求的情況下還是需要進(jìn)行一定的原生的開發(fā)，合理的組件實(shí)現(xiàn)方式可以降低使用和跨平臺(tái)的成本。
（底層實(shí)現(xiàn)分析參見：React-Native 渲染實(shí)現(xiàn)分析，本文僅討論組件開發(fā)方法）
React Native組件開發(fā)
RN的組件開發(fā)有幾種方式，JS組件、Native功能組件、NativeUI組件。JS組件是僅使用React Native自帶的組件進(jìn)行組合實(shí)現(xiàn)的組件，優(yōu)勢(shì)是跨平臺(tái)方便，但受限于RN實(shí)現(xiàn)的效果，一些復(fù)雜需求無(wú)法實(shí)現(xiàn)。而Native組件要強(qiáng)大許多，不過(guò)需要考慮平臺(tái)差異，提供統(tǒng)一的接口難度要大一些。
JS組件（熟悉React可略過(guò)）
JS組件是指僅靠RN本身自帶的組件開發(fā)的組件，是RN下最基礎(chǔ)的開發(fā)方式，大部分的組件都是JS組件。最大的好處是可以低成本的跨平臺(tái)。JS組件的開發(fā)體驗(yàn)跟React（Web）一致，區(qū)別在基礎(chǔ)標(biāo)簽不一樣，以及樣式定義方式不一樣。
一個(gè)例子，無(wú)網(wǎng)絡(luò)提示組件：
（例子語(yǔ)言Typescript）
// 組件的屬性定義 interface PropsDefine { // 組件寬度 width: number // 組件高度 height: number // 點(diǎn)擊刷新按鈕回調(diào)，可選 onClickRefresh?: () => void
}
export class NoNetwork extends React.Component<PropsDefine, {}> { // 組件無(wú)狀態(tài)，定義為空：{} // 組件的默認(rèn)屬性定義，單例，實(shí)例間共享 static defaultProps = { onClickRefresh: () => { }
}
