React Native StyleSheet 樣式表機制解析

StyleSheet 設計目的

• 代碼質量：樣式與渲染邏輯分離，命名語義化。
• 效能：樣式對象轉為 ID 引用，避免重複創建；跨橋傳輸僅發送一次 ID（未完全實現）。

StyleSheet.create 實現

class StyleSheet {
    static create(obj) {
        var result = {};
        for (var key in obj) {
            StyleSheetValidation.validateStyle(key, obj[key]);
            result[key] = StyleSheetRegistry.registerStyle(obj[key]);
        }
        return result;
    }
}

遍歷輸入對象，驗證後註冊到註冊表，返回 {key: uniqueID} 映射。

StyleSheetRegistry 註冊表

var styles = {}, uniqueID = 1, emptyStyle = {};
class StyleSheetRegistry {
    static registerStyle(style) {
        var id = ++uniqueID;
        if (__DEV__) Object.freeze(style);
        styles[id] = style;
        return id;
    }
    static getStyleByID(id) {
        if (!id) return emptyStyle; // 支援 style={[cond && id]} 模式
        var style = styles[id];
        if (!style) { console.warn('Invalid style id: ' + id); return emptyStyle; }
        return style;
    }
}

註冊凍結樣式對象，賦予遞增 ID。getStyleByID 供運行時解析。

使用範例

var styles = StyleSheet.create({
    container: { borderRadius: 4, borderWidth: 0.5, borderColor: '#d6d7da' },
    title: { fontSize: 19, fontWeight: 'bold' },
    activeTitle: { color: 'red' }
});

// 單一樣式
<View style={styles.container} />

// 多樣式合併（後者覆蓋前者）
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />

關鍵機制

• 樣式對象註冊後不可變（開發模式凍結）。
• 條件式樣式利用 && 短路特性：false && id → false，getStyleByID(false) 返回空樣式。
• 陣列語法合併多個樣式 ID，後者優先級高。