React Native 样式总结

回顾一下本人开发ReactNative及H5的相关经历,打算写一篇文章来对比一下ReactNative中样式和H5中CSS的注意点


常用的用法及各个组件有哪些样式支持等大家可以去FB的RN官网上查阅得知,https://reactnative.cn/docs/0.51/style.html#content 这里不具体展开。这样先主要讲几大类吧:


1、ReactNative 布局


ReactNative的布局完全是用Flex来使用的,垂直居中的解决最好方案,具体的Flex写法问题可以参考 ruanyf老师的教程。但是ReactNative相较于CSS中阉割掉了部分属性值如:

而且默认的flex布局是column布局(也就是默认从上到下排列),justifyContent相对于主轴对齐,alignItems是相对于交叉轴对齐(水平方向不一定是主轴,主要是看flexDireaction的值怎么设置 row水平主轴 column垂直)


2、 ReactNative 写法和CSS写法的差异


ReactNative中写法采用驼峰式,而且要有它自己支持的写法。可以说RN中的样式CSS中都有,是CSS样式的子集,style属性来代替class处理样式。

  • View类似于Div, 默认占用100%宽度,是典型也是最常用的块状元素

  • RN中绝对定位和相对定位父元素不需要设置position和zindex

  • Text在被View包裹时候可设置padding margin像块状, 在被Text包裹时候像内联元素无法设置padding margin, 且可继承




3、ReactNative 的样式分离思考


如果你不喜欢CSS IN JS的写法 ReactNative也能引入webpack的loader,

https://github.com/dengchengmi/react-native-style-loader

npm install react-native-style-loader less-loader less --save-dev


主要解决下列几个问题

  • 引入less预编译,可以进行变量的定义和模块化管理

  • 提供了px, vw, vh, rem(和css中的功能类似),pt 和ios中的pt, andorid中的dp是一个道理, 还有rem方法

  • 支持媒体查询 @media query

  • 支持react native stylesheet 的嵌套

  • 支持margin, padding, box-shadow等的简写

  • 自动将id和class驼峰化

  • 提供了calc 功能,例如:calc(~'100vh - 49pt')




media query demo

@media (min-width: 350px) and (max-width: 500px) {

html {

font-size: 100pt;

}

}

.container {

@media ios { padding-top: 20pt; }

@media android { padding-top: 25pt; }

}



另外强推 https://yogalayout.com/ YOGA这个网站,可以图形化布局生成代码



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值