mirror of
https://github.com/status-im/react-native.git
synced 2025-01-10 09:35:48 +00:00
6f1417c849
Summary: Copy of #5760 reverted merge. We need to preserve history of docs changes on the webserver. The goal is to allow users to browse outdated versions of docs. To make things simple all websites will be released to https://facebook.github.io/react-native/releases/version/XX folder when there is a branch cut. I switched from Travis CI to Cirle CI because it works faster and I am more familiar with it. How it works: 1. If code is pushed to `master` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/next folder. Github will serve this website from https://facebook.github.io/react-native/releases/version/next URL. All relative URLs will work within that website 2. If code is pushed to `0.20-stable` branch then CI will build a fresh version of docs and put it in https://github.com/facebook/react-native/tree/gh-pages/releases/0.20 folder. Github will serve this website from https://facebook.github.io/react-native/releases/v Closes https://github.com/facebook/react-native/pull/5873 Reviewed By: svcscm Differential Revision: D2926901 Pulled By: androidtrunkagent fb-gh-sync-id: 16aea430bac815933d9c603f03921cc6353906f1 shipit-source-id: 16aea430bac815933d9c603f03921cc6353906f1
103 lines
3.1 KiB
Markdown
103 lines
3.1 KiB
Markdown
---
|
|
id: style
|
|
title: Style
|
|
layout: docs
|
|
category: Guides
|
|
permalink: docs/style.html
|
|
next: images
|
|
---
|
|
|
|
React Native doesn't implement CSS but instead relies on JavaScript to let you style your application. This has been a controversial decision and you can read through those slides for the rationale behind it.
|
|
|
|
<script async class="speakerdeck-embed" data-id="2e15908049bb013230960224c1b4b8bd" data-ratio="2" src="//speakerdeck.com/assets/embed.js"></script>
|
|
|
|
## Declare Styles
|
|
|
|
The way to declare styles in React Native is the following:
|
|
|
|
```javascript
|
|
var styles = StyleSheet.create({
|
|
base: {
|
|
width: 38,
|
|
height: 38,
|
|
},
|
|
background: {
|
|
backgroundColor: '#222222',
|
|
},
|
|
active: {
|
|
borderWidth: 2,
|
|
borderColor: '#00ff00',
|
|
},
|
|
});
|
|
```
|
|
|
|
`StyleSheet.create` construct is optional but provides some key advantages. It ensures that the values are **immutable** and **opaque** by transforming them into plain numbers that reference an internal table. By putting it at the end of the file, you also ensure that they are only created once for the application and not on every render.
|
|
|
|
All the attribute names and values are a subset of what works on the web. For layout, React Native implements [Flexbox](docs/flexbox.html).
|
|
|
|
## Using Styles
|
|
|
|
All the core components accept a style attribute.
|
|
|
|
```javascript
|
|
<Text style={styles.base} />
|
|
<View style={styles.background} />
|
|
```
|
|
|
|
They also accept an array of styles.
|
|
|
|
```javascript
|
|
<View style={[styles.base, styles.background]} />
|
|
```
|
|
|
|
The behavior is the same as `Object.assign`: in case of conflicting values, the one from the right-most element will have precedence and falsy values like `false`, `undefined` and `null` will be ignored. A common pattern is to conditionally add a style based on some condition.
|
|
|
|
```javascript
|
|
<View style={[styles.base, this.state.active && styles.active]} />
|
|
```
|
|
|
|
Finally, if you really have to, you can also create style objects in render, but they are highly discouraged. Put them last in the array definition.
|
|
|
|
```javascript
|
|
<View
|
|
style={[styles.base, {
|
|
width: this.state.width,
|
|
height: this.state.width * this.state.aspectRatio
|
|
}]}
|
|
/>
|
|
```
|
|
|
|
## Pass Styles Around
|
|
|
|
In order to let a call site customize the style of your component children, you can pass styles around. Use `View.propTypes.style` and `Text.propTypes.style` in order to make sure only styles are being passed.
|
|
|
|
```javascript
|
|
var List = React.createClass({
|
|
propTypes: {
|
|
style: View.propTypes.style,
|
|
elementStyle: View.propTypes.style,
|
|
},
|
|
render: function() {
|
|
return (
|
|
<View style={this.props.style}>
|
|
{elements.map((element) =>
|
|
<View style={[styles.element, this.props.elementStyle]} />
|
|
)}
|
|
</View>
|
|
);
|
|
}
|
|
});
|
|
|
|
// ... in another file ...
|
|
<List style={styles.list} elementStyle={styles.listElement} />
|
|
```
|
|
## Supported Properties
|
|
|
|
You can checkout latest support of CSS Properties in following Links.
|
|
|
|
- [View Properties](docs/view.html#style)
|
|
- [Image Properties](docs/image.html#style)
|
|
- [Text Properties](docs/text.html#style)
|
|
- [Flex Properties](docs/flexbox.html#content)
|
|
- [Transform Properties](docs/transforms.html#content)
|