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:
parent
53d3f94175
commit
553a0ca5b8
16
docs/Text.md
16
docs/Text.md
|
@ -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
|
||||||
|
|
Loading…
Reference in New Issue