mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-04-29 04:35:36 +08:00
Add StyleSheet.setStyleAttributePreprocessor
Summary:
**Motivation**
On Exponent we load fonts dynamically and assign their native names by appending a session id, so that fonts from one Exponent "experience" do not clash with each other. So, before sending the `fontFamily` to native, we want to change it to the Exponent-scoped `fontFamily`.
Example:
```js
// Before rendering your app
StyleSheet.setStyleAttributePreprocessor('fontFamily', _processFontFamily);
function _processFontFamily(name) {
// Pass system fonts through
if (!name || Constants.systemFonts.indexOf(name) >= 0) {
return name;
}
if (!Font.isLoaded(name)) {
if (__DEV__) {
console.error(`${name} is not a system font and has not been loaded through Exponent.Font.loadAsync. If you intended to use a system font, make sure you typed the name correctly and that it is supported by the current operating system. If this is a custom font, be sure to load it with Exponent.Font.loadAsync`);
} else {
return 'system';
}
}
return `ExponentFont-
Closes https://github.com/facebook/react-native/pull/11138
Differential Revision: D4245518
Pulled By: mkonicek
fbshipit-source-id: bd2452b1129d6675aa7b88e41351f8bb61fa20a3
This commit is contained in:
committed by
Facebook Github Bot
parent
00f888a318
commit
346858a552
@@ -13,6 +13,7 @@
|
||||
|
||||
var PixelRatio = require('PixelRatio');
|
||||
var ReactNativePropRegistry = require('ReactNativePropRegistry');
|
||||
var ReactNativeStyleAttributes = require('ReactNativeStyleAttributes');
|
||||
var StyleSheetValidation = require('StyleSheetValidation');
|
||||
|
||||
var flatten = require('flattenStyle');
|
||||
@@ -162,6 +163,34 @@ module.exports = {
|
||||
*/
|
||||
flatten,
|
||||
|
||||
/**
|
||||
* WARNING: EXPERIMENTAL. Breaking changes will probably happen a lot and will
|
||||
* not be reliably announced. The whole thing might be deleted, who knows? Use
|
||||
* at your own risk.
|
||||
*
|
||||
* Sets a function to use to pre-process a style property value. This is used
|
||||
* internally to process color and transform values. You should not use this
|
||||
* unless you really know what you are doing and have exhausted other options.
|
||||
*/
|
||||
setStyleAttributePreprocessor(property: string, process: (nextProp: mixed) => mixed) {
|
||||
let value;
|
||||
|
||||
if (typeof ReactNativeStyleAttributes[property] === 'string') {
|
||||
value = {};
|
||||
} else if (typeof ReactNativeStyleAttributes[property] === 'object') {
|
||||
value = ReactNativeStyleAttributes[property];
|
||||
} else {
|
||||
console.error(`${property} is not a valid style attribute`);
|
||||
return;
|
||||
}
|
||||
|
||||
if (__DEV__ && typeof value.process === 'function') {
|
||||
console.warn(`Overwriting ${property} style attribute preprocessor`);
|
||||
}
|
||||
|
||||
ReactNativeStyleAttributes[property] = { ...value, process };
|
||||
},
|
||||
|
||||
/**
|
||||
* Creates a StyleSheet style reference from the given object.
|
||||
*/
|
||||
@@ -172,5 +201,5 @@ module.exports = {
|
||||
result[key] = ReactNativePropRegistry.register(obj[key]);
|
||||
}
|
||||
return result;
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user