mirror of
https://github.com/status-im/react-native.git
synced 2025-01-09 17:15:54 +00:00
433fb336af
Summary:This avoids flattening styles in most common cases. It diffs against the nested arrays. The special case is when a property gets removed, it creates an object that stores the removed keys which then gets resolved using a second pass through the nested array. You can conceptually think of this algorithm as: 1) Diff and store changes as you go 2) If something was removed, flatten as necessary I also merged in another commit that renames the StyleSheetRegistry to ReactNativePropRegistry. There is nothing in here that makes it specific to styles anymore. That's just a decoupled view attribute configuration option. This registry can be used for any set of nested props, if we even want to keep this feature at all. Reviewed By: vjeux Differential Revision: D2492885 fb-gh-sync-id: c976ac28b7e63545132c36da0ee0c1c562e7c9e5 shipit-source-id: c976ac28b7e63545132c36da0ee0c1c562e7c9e5
103 lines
2.8 KiB
JavaScript
103 lines
2.8 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,
|
|
|
|
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;
|
|
}
|
|
};
|