React Native之StyleSheet样式表

概述

在React Native中,StyleSheet是实现了类似Web中CSS样式表的功能。最简单的使用如下,先定一个StyleSheet的样式表,然后在View中引用样式。

var styles = StyleSheet.create({
  container: {
    borderRadius: 4,
    borderWidth: 0.5,
    borderColor: '#d6d7da',
  },
  title: {
    fontSize: 19,
    fontWeight: 'bold',
  },
  activeTitle: {
    color: 'red',
  },
});

view中引用:

<View style={styles.container}>
  <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>

StyleSheet样式表的优点

采用StyleSheet样式表的优点注意如下: 从代码质量角度来分析:

  • 从render渲染方法中移除了styles样式相关代码,这样可以使代码更加容易阅读
  • 通过对不同样式命名,正好也是对render方法中的组件的一种标志
  • 这样的写法做到了业务和样式的分离,为后面分层开发打下了基础

从性能角度来分析: - 通过StyleSheet,我们可以通过标志的样式ID来引用,而不是每次都要创建一个新的Style对象 - 该允许样式通过桥接在原生代码和JavaScript中传递一次,后面全部通过该id进行引用(不过现在该功能还没有实现)

StyleSheet使用

调用方法:

create(obj:{[key:string]:any}) static 静态方法 通过给定的对象进行常见一个StyleSheet样式

属性

  1. .hairlineWidth:CallExpression 该用来定义当前平台最细的宽度。该属性用来设置边框或者两个组件之间的分割线。例如:
{
    borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth
  }
  1. flatten: CallExpression 使用异常。
var styles = StyleSheet.create({ 
listItem: { 
flex: 1, fontSize: 16, color: 'white' }, selectedListItem: { color: 'green' } }); 
StyleSheet.flatten([styles.listItem, styles.selectedListItem]) 
// returns { flex: 1, fontSize: 16, color: 'green' } 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏冰霜之地

Weex 事件传递的那些事儿

在前两篇文章里面分别谈了Weex如何在Native端初始化的和Weex是如何高效的渲染Native的原生UI的。Native这边还缺一块,那就是Native产生...

25440
来自专栏一“技”之长

iOS高质量的动画实现解决方案——Lottie

    真心的认为Lottie是一款十分优秀且实用的动画开发库,不只对于iOS和android原生开发者来说其让复杂动画的实现几乎没有成本,对于设计师来说,它的...

16920
来自专栏非著名程序员

基础篇章:关于 React Native之 ActivityIndicator 组件的讲解

(友情提示:RN学习,从最基础的开始,大家不要嫌弃太基础,会的同学请自行略过,希望不要耽误已经会的同学的宝贵时间) 今天我们讲解的这个控件的非常简单,那就是Ac...

22170
来自专栏一“技”之长

iOS中UITextView方法解读 原

@property(nonatomic,assign) id<UITextViewDelegate> delegate;

10040
来自专栏吴老师移动开发

【iOS开发】Responder Chain做事件传递

像商品详情这种有各种各样的cell,cell里面又有各种不同的按钮事件等。cell里面可能还有几层UI,如何将这种层级很多很复杂的UI页面的事件传递到Contr...

13830
来自专栏懒人开发

React Native学习(五):使用Flexbox布局

我们在React Native中使用flexbox规则来指定某个组件的子元素的布局。 Flexbox可以在不同屏幕尺寸上提供一致的布局结构。 一般来说,使用

11210
来自专栏DannyHoo的专栏

initialize

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010105969/article/details/...

10810
来自专栏我有一个梦想

ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)

1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可。 一下是用法总结: 本文根据本人在项目中的应用,来...

35650
来自专栏数说工作室

【SAS Says】基础篇:ODS的使用(上)

你不可能总是在SAS上查看结果,如果结果很多你要一一的讲结果复制到word中去,有ODS就好啦!它可以把SAS的结果直接输出到word、PDF等文件中。 5.1...

91860
来自专栏React Native开发圈

React Native 文档查看组件

GitHub - forrest23/ReactNativeComponents: React Native组件大全

27310

扫码关注云+社区

领取腾讯云代金券