RN的stylesheet的属性及方法

属性:hairlineWidth: 自适应不同设备生成一条线

var styles = StyleSheet.create({
  separator: {
    borderBottomColor: '#bbb',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
});

属性:adsoluteFill: 

const styles = StyleSheet.create({
  wrapper: {
    ...StyleSheet.absoluteFill,
    top: 10,
    backgroundColor: 'transparent',
  },
});

相当于以下代码的缩写:

position: 'absolute',
left: 0, 
right: 0, 
top: 0, 
bottom: 0

 方法:create: 根据对象创建样式表

StyleSheet.create({
   textColor: {
       color: #000 
   } 
})

方法:flatten: 可以把样式对象的数组整合成一个样式对象,重复的样式属性以后一个为准

var styles = StyleSheet.create({
  listItem: {
    flex: 1,
    fontSize: 16,
    color: 'white',
  },
  selectedListItem: {
    color: 'green',
  },
});

console.log(StyleSheet.flatten([styles.listItem, styles.selectedListItem]));
// returns { flex: 1, fontSize: 16, color: 'green' }

 

posted @ 2019-07-09 09:55  seeBetter  阅读(2613)  评论(0)    收藏  举报