b1e49832ef
Summary: We had rendering support for prev links, but we never had any previous links in our metadata. Only next links. This adds that support to both Guides and APIs. **For guides**: `previous` is manually inserted into the metadata of the actual markdown file. **For APIs/Components**: `previous` is established via code within `extractDocs.js` > This isn't totally perfect. For example, the transition from the last guide to the first API/component has a next link from the guide, but not a previous link from the API since the way you get the previous links are different from guides and APIs. But this gets us really close. Closes https://github.com/facebook/react-native/pull/8754 Differential Revision: D3557972 Pulled By: hramos fbshipit-source-id: e270bb51e7a4f59f61dad28ae0928d27d0af3d4a
2.0 KiB
| id | title | layout | category | permalink | next | previous |
|---|---|---|---|---|---|---|
| style | Style | docs | The Basics | docs/style.html | height-and-width | state |
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:
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('LotsOfStyles', () => 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.
There are a lot more ways to customize text style. Check out the Text component reference for a complete list.
Now you can make your text beautiful. The next step in becoming a style master is to learn how to control component size.