react-native中的样式

[zhouzhongyuan]

1.简介

• React Native中定义样式，可以使用Object，也可以使用StyleSheet.create。
• 默认推荐使用StyleSheet.create。

2.StyleSheet.create优点

• 通过把value转为纯数字（数字哪儿来的，转化得到的），引用内部表格（转化时生成的）。
• 保证value的immutable和opaque(不透明)

3.使用时的注意点

• 把定义放在文件末尾。保证被创建一次，而不是每次render创建一次。官方示例 【疑问】难道放在顶部就会每次创建？？ 我认为是放在顶部效果一样，只要放在Class外面。

4.合并规则

用法类似<View style={[styles.base, styles.background]} />，与Object.assign作用相同。

• 右边的覆盖左边的
• falsy values like false, undefined and null will be ignored. (为什么忽略呢，因为style根本就没有这种value啊)

  5.样式大全

  react-native-styling-cheat-sheet

[zhouzhongyuan]

为什么很少见到代码display: 'flex'?

Also, there’s no need to set display: ‘flex’ on React Native because you don’t have any other choice.

不需要多此一举。 所有的组件默认都使用flexbox layout。但是，也有例外，Text组件内部使用text layout。 ——A Mini-Course on React Native Flexbox

[zhouzhongyuan]

react-native默认使用哪种盒模型？

border-box吧（中原说）

height``width的高度单位是什么？

All dimensions（尺寸） in React Native are unitless(无单位的), and represent density-independent pixels.