Make a new "Style" doc that's in The Basics and uses the RNWP
Summary: The example uses StyleSheet.create and also arrays-of-styles. I think this covers everything the old one did, but in simple-enough-for-the-basics form, so I removed the old one. I also reordered so that "Style -> Dimensions -> Layout" is the flow for learning "Styley" things. Closes https://github.com/facebook/react-native/pull/8379 Differential Revision: D3478384 Pulled By: caabernathy fbshipit-source-id: 158f0f0367c8eb8b2b24feda0d8d7a533fd7af4d
This commit is contained in:
Kevin Lacker
Facebook Github Bot 5
parent
0c9dba46bb
commit
e3f96acf26
|
|
@ -4,7 +4,7 @@ title: ListView
|
|||
layout: docs
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-listview.html
|
||||
next: basics-dimensions
|
||||
next: basics-network
|
||||
---
|
||||
|
||||
On mobile devices, lists are a core element in many applications. The [`ListView`](/react-native/docs/listview.html#content) component is a special type of [`View`](/react-native/docs/basics-component-view.html) that displays a *vertically* scrolling list of changing, but similarly structured, data.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: View
|
|||
layout: docs
|
||||
category: The Basics
|
||||
permalink: docs/basics-component-view.html
|
||||
next: basics-component-textinput
|
||||
next: style
|
||||
---
|
||||
|
||||
A [`View`](/react-native/docs/view.html#content) is the most basic building block for a React Native application. The `View` is an abstraction on top of the target platform's native equivalent, such as iOS's `UIView`.
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Integration With Existing Apps
|
|||
layout: docs
|
||||
category: Guides
|
||||
permalink: docs/integration-with-existing-apps.html
|
||||
next: style
|
||||
next: colors
|
||||
---
|
||||
|
||||
<div class="integration-toggler">
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ title: Layout
|
|||
layout: docs
|
||||
category: The Basics
|
||||
permalink: docs/basics-layout.html
|
||||
next: basics-network
|
||||
next: basics-component-textinput
|
||||
---
|
||||
|
||||
A component can specify the layout of its children using the flexbox algorithm. Flexbox is designed to provide a consistent layout on different screen sizes.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
---
|
||||
id: style
|
||||
title: Style
|
||||
layout: docs
|
||||
category: The Basics
|
||||
permalink: docs/style.html
|
||||
next: basics-dimensions
|
||||
---
|
||||
|
||||
With React Native, you don't use a special language or syntax for defining styles. You just style your application using JavaScript. All of the core components accept a prop named `style`. The style names and values usually match how CSS works on the web, except names are written like `backgroundColor` instead of like `background-color`.
|
||||
|
||||
The `style` prop can be a plain old JavaScript object. That's the simplest and what we usually use for example code. You can also pass an array of styles - the last style in the array has precedence, so you can use this to inherit styles.
|
||||
|
||||
As a component grows in complexity, it is often cleaner to use `StyleSheet.create` to define several styles in one place. Here's an example:
|
||||
|
||||
```ReactNativeWebPlayer
|
||||
import React, { Component } from 'react';
|
||||
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
|
||||
|
||||
class LotsOfStyles extends Component {
|
||||
render() {
|
||||
return (
|
||||
<View>
|
||||
<Text style={styles.red}>just red</Text>
|
||||
<Text style={styles.bigblue}>just bigblue</Text>
|
||||
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
|
||||
<Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
bigblue: {
|
||||
color: 'blue',
|
||||
fontWeight: 'bold',
|
||||
fontSize: 30,
|
||||
},
|
||||
red: {
|
||||
color: 'red',
|
||||
},
|
||||
});
|
||||
|
||||
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
|
||||
```
|
||||
|
||||
One common pattern is to make your component accept a `style` prop which in
|
||||
turn is used to style subcomponents. You can use this to make styles "cascade" they way they do in CSS.
|
||||
102
docs/Style.md
102
docs/Style.md
|
|
@ -1,102 +0,0 @@
|
|||
---
|
||||
id: style
|
||||
title: Style
|
||||
layout: docs
|
||||
category: Guides
|
||||
permalink: docs/style.html
|
||||
next: colors
|
||||
---
|
||||
|
||||
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)
|
||||
Loading…
Reference in New Issue