三个点实现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. 每次遇到三个点，代表往里走了一步。

【不良反应】此药方初次服用，可能部分患者会有短时的膈应不适感，坚持服用一个疗程后，您的中枢神经会慢慢接受，对三个点过敏者慎用。如有更好的药方，请在下方留言...