[快速上手RN] 5. React native 样式方案 使用tailwind css

系列教程

[快速上手RN] 0.React Native 快速启动项目
[快速上手RN] 1. React native 项目集成UI Kitten
[快速上手RN] 2. React native 项目色彩主题色编辑及使用
[快速上手RN] 3. React native 制作底部导航栏 Bottom Tab Bar
[快速上手RN] 4. React native 集成redux

1. 介绍

在开发React Native App的过程中，发现css写起来比较累，在使用styled-componet的情况下，需要编写维护大量的变量，实在不方便，于是想到tailwind.css，通过className的形式来完成样式的开发，实现方式可以说是行内样式+class选择器的结合。

效果如下

简单总结下使用tailwind的优点

• 基于约束
  设计好的颜色、间距、排版、阴影，在他们的约束下避免放飞自我，可以在没ui的情况下开发，或者配合ui修改设计来开发
• 细粒度
  每一个class都较为底层，可以更容易使用
• 性能
  使用到的class最终才会编译，意味着最终的css文件是最小实现
• 响应式
  支持响应式，只需要加对应的前缀，比如md:w-24表明中尺寸下的宽度为24px
• hover/focus状态
  支持hover/focus状态，只需要加对应的前缀，比如hover:w-24表明鼠标经过时的宽度为24px
• 可配置
  通过编辑tailwind.config.js文件来配置主题色以及扩展额外的样式

当然这次我们使用的是React native 那么就没办法