mirror of
https://github.com/zhigang1992/react-native.git
synced 2026-05-19 04:52:51 +08:00
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:
committed by
Facebook Github Bot 5
parent
0c9dba46bb
commit
e3f96acf26
48
docs/Basics-Style.md
Normal file
48
docs/Basics-Style.md
Normal file
@@ -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.
|
||||
Reference in New Issue
Block a user