 |
| Facebook Open Source React Native |
StyleSheet
StyleSheet是一種類似於CSS StyleSheets的抽象
創建一個新的StyleSheet：
const styles = StyleSheet.create({
container: {
borderRadius: 4,
borderWidth: 0.5,
borderColor: '#d6d7da',
},
title: {
fontSize: 19,
fontWeight: 'bold',
},
activeTitle: {
color: 'red',
},
});
使用StyleSheet：
<View style={styles.container}>
<Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
</View>
代碼質量：
- 通過將樣式移離渲染功能，您可以更輕鬆地理解代碼。
- 命名樣式是為渲染函數中的低級組件添加含義的好方法。
性能：
- 從樣式對象製作樣式表可以通過ID引用它，而不是每次都創建一個新的樣式對象。
- 它還允許僅通過橋發送一次樣式。所有後續用法都將引用id（尚未實現）。
Methods
Properties
參考
Methods
setStyleAttributePreprocessor()
static setStyleAttributePreprocessor(property, process)
警告：實驗。突然發生的變化可能會發生很多，並且不會得到可靠的宣布。整件事可能會被刪除，誰知道呢？使用風險由您自己承擔。
設置用於預處理樣式屬性值的函數。這在內部用於處理顏色和變換值。你不應該使用它，除非你真的知道你在做什麼，並已經用盡了其他選擇。
設置用於預處理樣式屬性值的函數。這在內部用於處理顏色和變換值。你不應該使用它，除非你真的知道你在做什麼，並已經用盡了其他選擇。
create()
static create(obj)
從給定對象創建StyleSheet樣式引用。
flatten
static flatten(style)
將樣式對像數組展平為一個聚合樣式對象。或者，此方法可用於查找StyleSheet.register返回的ID。
注意：請謹慎行事，因為濫用此功能會使您在優化方面受到重視。 ID通常通過橋接和內存實現優化。直接引用樣式對象將使您無法進行這些優化。
例：
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' }
替代用途：
var styles = StyleSheet.create({
listItem: {
flex: 1,
fontSize: 16,
color: 'white',
},
selectedListItem: {
color: 'green',
},
});
StyleSheet.flatten(styles.listItem);
// return { flex: 1, fontSize: 16, color: 'white' }
// Simply styles.listItem would return its ID (number)
此方法在內部使用StyleSheetRegistry.getStyleByID（樣式）來解析由ID表示的樣式對象。因此，樣式對像數組（StyleSheet.create（）的實例）被單獨解析為它們各自的對象，合併為一個然後返回。這也解釋了替代用途。
Properties
hairlineWidth
var styles = StyleSheet.create({
separator: {
borderBottomColor: '#bbb',
borderBottomWidth: StyleSheet.hairlineWidth,
},
});
此常量將始終為圓形像素數（因此由其定義的線條看起來很清晰）並將嘗試匹配底層平台上細線的標準寬度。但是，您不應該依賴它是一個恆定的大小，因為在不同的平台和屏幕密度上，它的值可能會以不同的方式計算。
如果您的模擬器縮小尺寸，則可能無法看到帶有細線寬度的線條。
如果您的模擬器縮小尺寸，則可能無法看到帶有細線寬度的線條。
absoluteFill
一種非常常見的模式是創建具有位置絕對和零位置的疊加，因此絕對填充可以用於方便並減少這些重複樣式的重複。
absoluteFillObject
有時您可能需要absoluteFill但有一些調整 - absoluteFillObject可用於在StyleSheet中創建自定義條目，例如：
const styles = StyleSheet.create({
wrapper: {
...StyleSheet.absoluteFillObject,
top: 10,
backgroundColor: 'transparent',
},
});
