Show an example of composition in the Text docs.

Summary:
Thanks for submitting a pull request! Please provide enough information so that others can review your pull request:

> **Unless you are a React Native release maintainer and cherry-picking an *existing* commit into a current release, ensure your pull request is targeting the `master` React Native branch.**

Explain the **motivation** for making this change. What existing problem does the pull request solve?

Prefer **small pull requests**. These are much easier to review and more likely to get merged. Make sure the PR does only one thing, otherwise please split it.

**Test plan (required)**

Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes UI.

Make sure tests pass on both Travis and Circle CI.

**Code formatting**

Look around. Match the style of the rest of the codebase. See also the simple [style guide](https://github.com/facebook/react-native/blob/master/CONTRIBUTING.md#style-guide).

For more info, see
Closes https://github.com/facebook/react-native/pull/9442

Differential Revision: D3740902

Pulled By: JoelMarcey

fbshipit-source-id: 6b3532faa7104813a515db6f7a24f6b05a2a5ffc
This commit is contained in:
Steven Leiva 2016-08-18 22:03:43 -07:00 committed by Facebook Github Bot 1
parent 53d3f94175
commit 553a0ca5b8
1 changed files with 16 additions and 0 deletions

View File

@ -121,6 +121,22 @@ You also lose the ability to set up a default font for an entire subtree. The re
</View> </View>
``` ```
Assuming that `MyAppText` is a component that simply renders out its children into a `Text` component with styling, then `MyAppHeaderText` can be defined as follows:
```javascript
class MyAppHeaderText extends Component {
render() {
<MyAppText>
<Text style={{fontSize: 20}}>
{this.props.children}
</Text>
</MyAppText>
}
}
```
Composing `MyAppText` in this way ensures that we get the styles from a top-level component, but leaves us the ability to add / override them in specific use cases.
React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red. React Native still has the concept of style inheritance, but limited to text subtrees. In this case, the second part will be both bold and red.
```javascript ```javascript