介绍原始写法 & 及其改进写法一
还有比较流行的 styled-components在RN中的使用 & 及其改进写法二
1.原写法
1 | /** |
原写法的缺点在于变量不好引入,不好体现样式间的关系,没有计算表达式等……
2.改进写法一
看StyleSheet.create的代码,就是直接返回一个对象
1 | //在react native 0.44版本中 |
那就可以不限于StyleSheet.create的写法,可以比较自由的返回一个对象了,下面给出一个我的简单例子:
1 |
|
运行一下可以看到 log出来的style2和style1的属性。
3. styled-components
号称React 中的 CSS 最佳实践,使用行内样式,支持CSS。该第三方也也可用于RN。
react-native init
了个RN工程 写了个简单的例子:
1 |
|
优点:
- react推荐的行内样式 css in js;
- 方便前端同学的写法 可以完全使用CSS的书写习惯
缺点和原始写法的差不多,还对本身不是前端开发的人来说带来额外的学习成本…… 所以还是不推荐……
参考链接:
- styled-components React 中的 CSS 最佳实践 | zhihu
- styled-components | 官方文档
- Styled Components:让样式也成为组件 | alloyteam.
4.改进写法二
简单来讲 styled-components 就是生成一个带样式的组件,完全可以吸收这种写法 自己改进RN中 ,而不使用styled-components这个库
结合 写法一 和 styled-components的想法,给出一个简单例子:
1 | import React, {Component} from 'react'; |
emmm ,无需引入第三方库 感觉好多了。缺点当然是不支持原CSS写法。
5. react native 0.45
在0.45版本中运行改进写法一时,你可能看到style2在控制台的输出类似为:
1 | //const style2 = StyleSheet.create(styles2Creator()); |
这是怎么肥事!我的item对象怎么变成数字了!
别急,在0.45版本后StyleSheet代码有所改变(其实我没看具体哪个小版本改的 _(:зゝ∠)_
), StyleSheet.create改成:
1 | //react native : 0.45.1 |
1 | //react native0.45.1 ReactNativePropRegistry.js |
通过看ReactNativePropRegistry代码,StyleSheet将样式对象储存在objects
中,并返回uniqueID
比如取回原来的item,就可以这样做:
1 | import ReactNativePropRegistry from '../node_modules/react-native/Libraries/Renderer/src/renderers/native/ReactNativePropRegistry'; |
就可以通过 ReactNativePropRegistry.getByID就可以取得样式对象了。这可能对于之前的改进写法造成了一点小麻烦,不过还可以用~
其他参考阅读:
- react-native-css | github css + sass in rn
- rn-less | github css + less in rn
- React-Native 样式管理方案浅谈 | zhihu