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 Using `StyleSheet.create` is optional but provides the best performance
are immutable in development, certain declarations are automatically converted (`style` is resolved to CSS stylesheets). Avoid creating unregistered style
to CSS rather than applied as inline styles, and styles are only created once objects.
for the application and not on every render.
The attribute names and values are a subset of CSS. See the `style` The attribute names and values are a subset of CSS. See the `style`
documentation of individual components. documentation of individual components.
@@ -56,12 +55,6 @@ A common pattern is to conditionally add style based on a condition:
styles.base, styles.base,
this.state.active && styles.active this.state.active && styles.active
]} /> ]} />
// or
<View style={{
...styles.base,
...(this.state.active && styles.active)
}} />
``` ```
## Composing styles ## Composing styles
+8 -7
View File
@@ -68,12 +68,6 @@ const registerStyle = (id, flatStyle) => {
const resolveProps = (reactNativeStyle) => { const resolveProps = (reactNativeStyle) => {
const flatStyle = flattenStyle(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 domStyle = createReactDOMStyle(flatStyle);
const style = {}; const style = {};
@@ -99,7 +93,14 @@ const resolveProps = (reactNativeStyle) => {
}; };
if (process.env.__REACT_NATIVE_DEBUG_ENABLED__) { 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(); console.groupEnd();
} }