Minor documentation changes

This commit is contained in:
Nicolas Gallagher
2017-01-02 11:27:46 -08:00
parent 8eaaf28a32
commit a74be91b7c
2 changed files with 11 additions and 17 deletions
+3 -10
View File
@@ -31,10 +31,9 @@ const styles = StyleSheet.create({
})
```
Using `StyleSheet.create` is optional but provides some key advantages: styles
are immutable in development, certain declarations are automatically converted
to CSS rather than applied as inline styles, and styles are only created once
for the application and not on every render.
Using `StyleSheet.create` is optional but provides the best performance
(`style` is resolved to CSS stylesheets). Avoid creating unregistered style
objects.
The attribute names and values are a subset of CSS. See the `style`
documentation of individual components.
@@ -56,12 +55,6 @@ A common pattern is to conditionally add style based on a condition:
styles.base,
this.state.active && styles.active
]} />
// or
<View style={{
...styles.base,
...(this.state.active && styles.active)
}} />
```
## Composing styles
+8 -7
View File
@@ -68,12 +68,6 @@ const registerStyle = (id, flatStyle) => {
const resolveProps = (reactNativeStyle) => {
const flatStyle = flattenStyle(reactNativeStyle);
if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) {
console.groupCollapsed('[render] deoptimized: resolving uncached styles');
console.log('source style\n', reactNativeStyle);
console.log('flattened style\n', flatStyle);
}
const domStyle = createReactDOMStyle(flatStyle);
const style = {};
@@ -99,7 +93,14 @@ const resolveProps = (reactNativeStyle) => {
};
if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) {
console.log('DOM props\n', props);
console.groupCollapsed('[StyleSheet] resolving uncached styles');
console.log(
`Slow operation. Resolving style objects (uncached result). ` +
`Occurs on first render and when using styles not registered with "StyleSheet.create"`
);
console.log('source => \n', reactNativeStyle);
console.log('flatten => \n', flatStyle);
console.log('resolve => \n', props);
console.groupEnd();
}