經常使用的佈局封裝成一個單獨的控制元件是很常見的需求, 基本步驟如下:

1. 建立控制元件(類似於一個Screen)

   import React, {Component} from 'react'
   ...
   export default class SettingItem extends Component {
       render() {
           return <View ...
       }
   }    

2. 使用時直接用標籤即可

   <SettingItem />

style樣式傳遞

直接嘗試上方程式碼時會發現在 <SettingItem /> 中定義的style樣式並沒有什麼卵用, 這是因為style並沒有在 SettingItem 類中被使用, 可以這樣做:

    export default class SettingItem extends Component {
        render() {
            return <View 
            style={[{...InternalStyle...}, this.props.style]}>
                ...
            </View>
        }
    }   

這裡把this.props.style作為了控制元件根View的Style中的一部分, 這樣外部定義的style就會在空間內部生效了.
注意: style的定義規則是以後面定義的為準, 所以要把this.props.style

props傳遞

如果這個自定義的控制元件有多種樣式/狀態, 需要根據外部欄位判斷來確定, 可以這樣做:

    export default class SettingItem extends Component {
        render() {
            return <View 
            style={[{...InternalStyle...}, this.props.style]}>
                ...
                {!this.props.showBottomDivider ? null : <NormalDivider/>}
                ...
 

            </View>
        }
    }
    SettingItem.defaultProps = {
        showBottomDivider: true
    };   

    <SettingItem
        showBottomDivider={false}
    />

注意, 這裡的 showBottomDivider props屬性不能作為控制元件內部的資料變化暫存物件, 直接程式碼修改此屬性是無效的

props型別限制

在多人協同開發時有可能出現以下場景:
A寫好了一個控制元件, 該控制元件中需要一個string型別的屬性, B在使用此控制元件時並不知道必須傳入此屬性, 或者不知道此屬性必須是string型別的, 這就會產生很多不必要的麻煩.

那RN裡有沒有像java裡@Nullable @ColorInt 註解類似功能的機制呢? 答案是prop-types.
prop-types 原來是在原始碼中的, 後來被單獨抽出作為一個庫, 使用npm install --save prop-types安裝它.

這樣使用:

SettingItem.propTypes = {
    // showBottomDivider強制為布林型別, isRequired則要求必須寫入
    showBottomDivider: PropTypes.bool.isRequired, 
};

如果使用了isRequired, 沒有定義該欄位時會彈出警告; 另外在編碼過程中, 會給予程式碼提示