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 #8379

Differential Revision: D3478384

Pulled By: caabernathy

fbshipit-source-id: 158f0f0367c8eb8b2b24feda0d8d7a533fd7af4d

Author: lacker

docs/Basics-Component-ListView.md

@@ -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.

docs/Basics-Component-View.md

@@ -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`.

docs/Basics-IntegrationWithExistingApps.md

@@ -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">

docs/Basics-Layout.md

@@ -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.

docs/Basics-Style.md

@@ -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.