三個點實現react-native樣式StyleSheet層級嵌套，巧用拓展運算符解構的姿式，簡潔明瞭——呂江民·平常隨筆

相信不少作前端的小夥伴，在開發react-native樣式StyleSheet的時候，都遇到一個問題：爲何react-native的StyleSheet開發體驗還停留在CSS1994年的水平？
爲何？
爲何？
爲何，不能像世界上最成熟、最穩定、最強大的專業級CSS擴展語言SASS/SCSS那樣，實現簡單的層級嵌套規則，像less同樣也行，請容許我使用層級嵌套規則優雅的書寫樣式好嗎？
本人不才，分享一下本身前兩天忽然想出的一個略顯拙劣的辦法：

優勢：

1. 這個方法不用依賴任何第三方庫，只須要三個點便可搞定。
2. 可摺疊，攜帶方便！在IDE中能夠像摺疊Json同樣摺疊樣式。
3. 層級縮進清晰明瞭，IDE自動格式化便可。

缺點：

1. 沒有局部做用域，畢竟是解構實現的，謹記keyName不能重名。
2. 好多點點點，看的人心慌，哎，沒辦法，這是方法核心所在。

import { StyleSheet } from 'react-native'

export default StyleSheet.create({
    ...{
        page:{
            // 第1層級: page style
        },
        ...{
            page_hd:{
                // 第2層級: page>hd style
            },
            page_bd:{
                // 第2層級: page>bd style
            },
            page_ft:{
                // 第2層級: page>ft style
            },
            ...{
                page_ft_bar:{
                    // 第2層級: page>ft>bar style
                }
            }
        },
    },
    other:{
        // 其餘: other style
    }
})

PS：

1. keyName不能重名
2. 每次想要嵌套，請在父級}外面寫...{子級}
3. 每次遇到三個點，表明往裏走了一步。

【不良反應】此藥方初次服用，可能部分患者會有短時的膈應不適感，堅持服用一個療程後，您的中樞神經會慢慢接受，對三個點過敏者慎用。若有更好的藥方，請在下方留言...