142 lines
4.1 KiB
JavaScript
142 lines
4.1 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule StyleSheet
|
|
* @flow
|
|
*/
|
|
'use strict';
|
|
|
|
var PixelRatio = require('PixelRatio');
|
|
var ReactNativePropRegistry = require('ReactNativePropRegistry');
|
|
var StyleSheetValidation = require('StyleSheetValidation');
|
|
|
|
var flatten = require('flattenStyle');
|
|
|
|
var hairlineWidth = PixelRatio.roundToNearestPixel(0.4);
|
|
if (hairlineWidth === 0) {
|
|
hairlineWidth = 1 / PixelRatio.get();
|
|
}
|
|
|
|
/**
|
|
* A StyleSheet is an abstraction similar to CSS StyleSheets
|
|
*
|
|
* Create a new StyleSheet:
|
|
*
|
|
* ```
|
|
* var styles = StyleSheet.create({
|
|
* container: {
|
|
* borderRadius: 4,
|
|
* borderWidth: 0.5,
|
|
* borderColor: '#d6d7da',
|
|
* },
|
|
* title: {
|
|
* fontSize: 19,
|
|
* fontWeight: 'bold',
|
|
* },
|
|
* activeTitle: {
|
|
* color: 'red',
|
|
* },
|
|
* });
|
|
* ```
|
|
*
|
|
* Use a StyleSheet:
|
|
*
|
|
* ```
|
|
* <View style={styles.container}>
|
|
* <Text style={[styles.title, this.props.isActive && styles.activeTitle]} />
|
|
* </View>
|
|
* ```
|
|
*
|
|
* Code quality:
|
|
*
|
|
* - By moving styles away from the render function, you're making the code
|
|
* easier to understand.
|
|
* - Naming the styles is a good way to add meaning to the low level components
|
|
* in the render function.
|
|
*
|
|
* Performance:
|
|
*
|
|
* - Making a stylesheet from a style object makes it possible to refer to it
|
|
* by ID instead of creating a new style object every time.
|
|
* - It also allows to send the style only once through the bridge. All
|
|
* subsequent uses are going to refer an id (not implemented yet).
|
|
*/
|
|
module.exports = {
|
|
/**
|
|
* This is defined as the width of a thin line on the platform. It can be
|
|
* used as the thickness of a border or division between two elements.
|
|
* Example:
|
|
* ```
|
|
* {
|
|
* borderBottomColor: '#bbb',
|
|
* borderBottomWidth: StyleSheet.hairlineWidth
|
|
* }
|
|
* ```
|
|
*
|
|
* This constant will always be a round number of pixels (so a line defined
|
|
* by it look crisp) and will try to match the standard width of a thin line
|
|
* on the underlying platform. However, you should not rely on it being a
|
|
* constant size, because on different platforms and screen densities its
|
|
* value may be calculated differently.
|
|
*/
|
|
hairlineWidth,
|
|
|
|
/**
|
|
* Flattens an array of style objects, into one aggregated style object.
|
|
* Alternatively, this method can be used to lookup IDs, returned by
|
|
* StyleSheet.register.
|
|
*
|
|
* > **NOTE**: Exercise caution as abusing this can tax you in terms of
|
|
* > optimizations.
|
|
* >
|
|
* > IDs enable optimizations through the bridge and memory in general. Refering
|
|
* > to style objects directly will deprive you of these optimizations.
|
|
*
|
|
* Example:
|
|
* ```
|
|
* 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' }
|
|
* ```
|
|
* Alternative use:
|
|
* ```
|
|
* StyleSheet.flatten(styles.listItem);
|
|
* // return { flex: 1, fontSize: 16, color: 'white' }
|
|
* // Simply styles.listItem would return its ID (number)
|
|
* ```
|
|
* This method internally uses `StyleSheetRegistry.getStyleByID(style)`
|
|
* to resolve style objects represented by IDs. Thus, an array of style
|
|
* objects (instances of StyleSheet.create), are individually resolved to,
|
|
* their respective objects, merged as one and then returned. This also explains
|
|
* the alternative use.
|
|
*/
|
|
flatten,
|
|
|
|
/**
|
|
* Creates a StyleSheet style reference from the given object.
|
|
*/
|
|
create(obj: {[key: string]: any}): {[key: string]: number} {
|
|
var result = {};
|
|
for (var key in obj) {
|
|
StyleSheetValidation.validateStyle(key, obj);
|
|
result[key] = ReactNativePropRegistry.register(obj[key]);
|
|
}
|
|
return result;
|
|
}
|
|
};
|