status-im
/
react-native
mirror of https://github.com/status-im/react-native.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make "The Basics" flow like a linear tutorial 

Summary: Closes https://github.com/facebook/react-native/pull/8429

Differential Revision: D3487369

Pulled By: lacker

fbshipit-source-id: 59b32f2a2a67370192c91dc43da3d4b76a43b810
This commit is contained in:
Kevin Lacker 2016-06-26 12:30:58 -07:00 committed by Facebook Github Bot 0
parent 0e07c36794
commit bfb4c054f4
18 changed files with 349 additions and 293 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
docs/Basics-Component-Image.md
View File

@ -1,32 +0,0 @@
---
id: basics-component-image
title: Image
layout: docs
category: The Basics
permalink: docs/basics-component-image.html
next: basics-component-view
---
Another basic React Native component is the [`Image`](/react-native/docs/image.html#content) component. Like `Text`, the `Image` component simply renders an image.
> An `Image` is analogous to the `<img>` HTML tag when building websites.
The simplest way to render an image is to provide a source file to that image via the `source` attribute.
This example displays a checkbox `Image` on the device.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class ImageBasics extends Component {
render() {
return (
<Image source={require('./img/favicon.png')} />
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => ImageBasics);
```

71
docs/Basics-Component-ScrollView.md
View File

@ -1,71 +0,0 @@
---
id: basics-component-scrollview
title: ScrollView
layout: docs
category: The Basics
permalink: docs/basics-component-scrollview.html
next: basics-component-listview
---
Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.
The [`ScrollView`](/react-native/docs/scrollview.html) is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the `horizontal` property).
`ScrollView` works best to present a list of short, static items of a known quantity. All the elements and views of a `ScrollView` are rendered a priori, even if they are not currently shown on the screen. Contrast this with a `ListView`, which render only those views that are on the screen and remove views that go off-screen.
> [`TextView`](/react-native/docs/basics-component-textview.html) and [`ListView`](/react-native/docs/basics-component-listview.html) are specialized scrollable containers.
This contrived example creates a horizontal `ScrollView` with a static amount of heterogenous elements (images and text).
```ReactNativeWebPlayer
import React, { Component } from 'react';
import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native'
class ScrollViewBasics extends Component {
render() {
return(
<ScrollView horizontal={true}>
<View>
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Text style={{fontSize:96}}>Text1</Text>
</View>
<View>
<Text style={{fontSize:96}}>Text2</Text>
</View>
<View>
<Text style={{fontSize:96}}>Text3</Text>
</View>
<View>
<Text style={{fontSize:96}}>Text4</Text>
</View>
<View>
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Image source={require('./img/favicon.png')} />
</View>
<View>
<Text style={{fontSize:96}}>Text5</Text>
</View>
<View>
<Text style={{fontSize:96}}>Text6</Text>
</View>
</ScrollView>
);
}
}
AppRegistry.registerComponent('AwesomeProject', () => ScrollViewBasics);
```

53
docs/Basics-Component-Text.md
View File

@ -1,53 +0,0 @@
---
id: basics-component-text
title: Text
layout: docs
category: The Basics
permalink: docs/basics-component-text.html
next: basics-component-image
---
The most basic component in React Native is the [`Text`](/react-native/docs/text.html#content) component. The `Text` component simply renders text.
This example displays the `string` `"Hello World!"` on the device.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class TextBasics extends Component {
render() {
return (
<Text style={{marginTop: 22}}>Hello World!</Text>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => TextBasics);
```
In this slightly more advanced example we will display the `string` `"Hello World"` retrieved from this.state on the device and stored in the `text` variable. The value of the `text` variable is rendered by using `{text}`.
```ReactNativeWebPlayer
import React, {Component} from 'react';
import { AppRegistry, Text } from 'react-native';
class TextBasicsWithState extends Component {
constructor(props) {
super(props);
this.state = {text: "Hello World"};
}
render() {
var text = this.state.text;
return (
<Text style={{marginTop: 22}}>
{text}
</Text>
)
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => TextBasicsWithState);
```

39
docs/Basics-Component-TextInput.md
View File

@ -1,39 +0,0 @@
---
id: basics-component-textinput
title: TextInput
layout: docs
category: The Basics
permalink: docs/basics-component-textinput.html
next: basics-component-scrollview
---
Direct text-based user input is a foundation for many apps. Writing a post or comment on a page is a canonical example of this. [`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text.
This example creates a simple `TextInput` box with the `string` `Type something here` as the placeholder when the `TextInput` is empty.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class TextInputBasics extends Component {
render() {
return (
<View style={{paddingTop: 22}}>
<TextInput
style={{
height: 40,
margin: 5,
paddingLeft: 10,
borderColor: 'black',
borderWidth: 1
}}
placeholder="Type something here"
/>
</View>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => TextInputBasics);
```

34
docs/Basics-Component-View.md
View File

@ -1,34 +0,0 @@
---
id: basics-component-view
title: View
layout: docs
category: The Basics
permalink: docs/basics-component-view.html
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`.
> A `View` is analogous to using a `<div>` HTML tag for building websites.
It is recommended that you wrap your components in a `View` to style and control layout.
The example below creates a `View` that aligns the `string` `Hello` in the top center of the device, something which could not be done with a `Text` component alone (i.e., a `Text` component without a `View` would place the `string` in a fixed location in the upper corner):
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class ViewBasics extends Component {
render() {
return (
<View style={{marginTop: 22, alignItems: 'center'}}>
<Text>Hello!</Text>
</View>
);
}
}
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => ViewBasics);
```

36
docs/Basics-Components.md
View File

@ -1,36 +0,0 @@
---
id: basics-components
title: Components
layout: docs
category: The Basics
permalink: docs/basics-components.html
next: basics-component-text
---
Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, often nested. Those components are then mapped to the native UI on the targeted platform.
####Props####
#####`this.props`#####
Components can be configured by passing properties `props` to the constructor. You can access `props` from your component's methods by accessing `this.props`. You should not alter your props within component methods.
####State####
#####`this.state`#####
Components maintain their state using the state object. You can access your component state via `this.state`. Each component should manage its own state. Parent components should not manage children state and children components should not manage parent component state.
#####`this.setState({key: value, ...})`#####
To update or change the state of your component passing a new object representing your newly desired state to `this.setState(obj)`. The specificed keys will be merged into `this.state`. Any existing keys will be overridden by new values.
## Core Components.
React Native has a number of core components that are commonly used in applications, either on their own or combined to build new components.
- [Text](/react-native/docs/basics-component-text.html)
- [Image](/react-native/docs/basics-component-image.html)
- [View](/react-native/docs/basics-component-view.html)
- [TextInput](/react-native/docs/basics-component-textinput.html)
- [ListView](/react-native/docs/basics-component-listview.html)

35
docs/QuickStart-GettingStarted.md → docs/GettingStarted.md
View File

@ -4,9 +4,17 @@ title: Getting Started
layout: docs
category: The Basics
permalink: docs/getting-started.html
next: basics-components
next: tutorial
---
Welcome to React Native! This page will help you install React Native on
your system, so that you can build apps with it right away. If you already
have React Native installed, you can skip ahead to the
[Tutorial](/react-native/docs/tutorial.html).
The instructions are a bit different depending on your development operating system, and whether you want to start developing for iOS or Android. If you
want to develop for both iOS and Android, that's fine - you just have to pick
one to start with, since the setup is a bit different.
<div class="toggler">
<style>
@ -35,7 +43,7 @@ block { display: none; }
.display-platform-android.display-os-windows .android.windows {
display: block;
}</style>
<span>Target:</span>
<span>Mobile OS:</span>
<a href="javascript:void(0);" class="button-ios" onclick="display('platform', 'ios')">iOS</a>
<a href="javascript:void(0);" class="button-android" onclick="display('platform', 'android')">Android</a>
<span>Development OS:</span>
@ -58,13 +66,13 @@ block { display: none; }
<block class="mac ios" />
## Dependencies
## Dependencies for Mac + iOS
You will need Xcode, node.js, the React Native command line tools, and Watchman.
<block class="mac android" />
## Dependencies
## Dependencies for Mac + Android
You will need Android Studio, node.js, the React Native command line tools, and Watchman.
@ -98,9 +106,15 @@ If you plan to make changes in Java code, we recommend [Gradle Daemon](https://d
<!-- ######### LINUX and WINDOWS for ANDROID ##################### -->
<block class="linux windows android" />
<block class="linux android" />
## Dependencies
## Dependencies for Linux + Android
<block class="windows android" />
## Dependencies for Windows + Android
<block class="linux windows android" />
You will need node.js, the React Native command line tools, Watchman, and Android Studio.
@ -228,11 +242,14 @@ Congratulations! You've successfully run and modified a React Native app.
<block class="mac windows linux ios android" />
## Special Cases
## Now What?
- This page explains how to create a new React Native app. If you are adding React Native components to an existing application, check out the [Integration guide](docs/integration-with-existing-apps.html).
- If you want to add this new React Native code to an existing application, check out the [Integration guide](docs/integration-with-existing-apps.html).
- If you run into any issues getting started, see the [Troubleshooting](docs/troubleshooting.html#content) page.
- If you can't get this to work, see the [Troubleshooting](docs/troubleshooting.html#content) page.
- If you're curious to learn more about React Native, continue on
to the [Tutorial](docs/tutorial.html).
<script>
// Convert <div>...<span><block /></span>...</div>

46
docs/HandlingTextInput.md Normal file
View File

@ -0,0 +1,46 @@
---
id: handling-text-input
title: Handling Text Input
layout: docs
category: The Basics
permalink: docs/handling-text-input.html
next: using-a-scrollview
---
[`TextInput`](/react-native/docs/textinput.html#content) is a basic component that allows the user to enter text. It has an `onChangeText` prop that takes
a function to be called every time the text changed.
This example shows how to count the number of characters that have been typed in a box.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';
class CharacterCounter extends Component {
constructor(props) {
super(props);
this.state = {text: ''};
}
render() {
return (
<View style={{padding: 10}}>
<TextInput
style={{height: 40}}
placeholder="Pleeeease type on me!"
onChangeText={(text) => this.setState({text})}
/>
<Text style={{padding: 10}}>{this.state.text.length}</Text>
</View>
);
}
}
AppRegistry.registerComponent('CharacterCounter', () => CharacterCounter);
```
In this example, we store `text` in the state, because it changes over time.
There are a lot more advanced things you might want to do with a text input. For example, you could validate the text inside while the user types. For more detailed examples, see the [React docs on controlled components](https://facebook.github.io/react/docs/forms.html), or the [reference docs for TextInput](/react-native/docs/textinput.html).
Text input is probably the simplest example of a component whose state naturally changes over time. Next, let's look at another type of component like this is one that controls layout, and [learn about the ScrollView](/react-native/docs/using-a-scrollview.html).

12
docs/Basics-Dimensions.md → docs/HeightAndWidth.md
View File

@ -1,13 +1,13 @@
---
id: basics-dimensions
title: Dimensions
id: height-and-width
title: Height and Width
layout: docs
category: The Basics
permalink: docs/basics-dimensions.html
next: basics-layout
permalink: docs/height-and-width.html
next: flexbox
---
A component's dimensions determine its size on the screen.
A component's height and width determine its size on the screen.
#### Fixed Dimensions
@ -61,3 +61,5 @@ class FlexDimensionsBasics extends Component {
AppRegistry.registerComponent('AwesomeProject', () => FlexDimensionsBasics);
```
After you can control a component's size, the next step is to [learn how to lay it out on the screen](/react-native/docs/flexbox.html).

0
docs/Basics-IntegrationWithExistingApps.md → docs/IntegrationWithExistingApps.md
View File

6
docs/Basics-Layout.md → docs/LayoutWithFlexbox.md
View File

@ -1,10 +1,10 @@
---
id: basics-layout
id: flexbox
title: Layout with Flexbox
layout: docs
category: The Basics
permalink: docs/flexbox.html
next: basics-component-textinput
next: handling-text-input
---
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.
@ -102,3 +102,5 @@ AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);
#### Going Deeper
We've covered the basics, but there are many other styles you may need for layouts. The full list of props that control layout is documented [here](./docs/layout-props.html).
We're getting close to being able to build a real application. One thing we are still missing is a way to take user input, so let's move on to [learn how to handle text input with the TextInput component](/react-native/docs/handling-text-input.html).

4
docs/Basics-Network.md → docs/Networking.md
View File

@ -1,5 +1,5 @@
---
id: basics-network
id: network
title: Networking
layout: docs
category: The Basics
@ -125,3 +125,5 @@ ws.onclose = (e) => {
console.log(e.code, e.reason);
};
```
If you've gotten here by reading linearly through the tutorial, then you are a pretty impressive human being. Congratulations. Next, you might want to check out [all the cool stuff the community does with React Native](/react-native/docs/more-resource.html).

72
docs/Props.md Normal file
View File

@ -0,0 +1,72 @@
---
id: props
title: Props
layout: docs
category: The Basics
permalink: docs/props.html
next: state
---
Most components can be customized when they are created, with different parameters. These creation parameters are called `props`.
For example, one basic React Native component is the `Image`. When you
create an image, you can use a prop named `source` to control what image it shows.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Image } from 'react-native';
class Bananas extends Component {
render() {
let pic = {
uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};
return (
<Image source={pic} />
);
}
}
AppRegistry.registerComponent('Bananas', () => Bananas);
```
Notice that `{pic}` is surrounded by braces, to embed the variable `pic` into JSX. You can put any JavaScript expression inside braces in JSX.
Your own components can also use `props`. This lets you make a single component
that is used in many different places in your app, with slightly different
properties in each place. Just refer to `this.props` in your `render` function. Here's an example:
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}
class LotsOfGreetings extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
<Greeting name='Valeera' />
</View>
);
}
}
AppRegistry.registerComponent('LotsOfGreetings', () => LotsOfGreetings);
```
Using `name` as a prop lets us customize the `Greeting` component, so we can reuse that component for each of our greetings. This example also uses the `Greeting` component in JSX, just like the built-in components. The power to do this is what makes React so cool - if you find yourself wishing that you had a different set of UI primitives to work with, you just invent new ones.
The other new thing going on here is the [`View`](/react-native/docs/view.html) component. A [`View`](/react-native/docs/view.html) is useful
as a container for other components, to help control style and layout.
With `props` and the basic [`Text`](/react-native/docs/text.html), [`Image`](/react-native/docs/image.html), and [`View`](/react-native/docs/view.html) components, you can
build a wide variety of static screens. To learn how to make your app change over time, you need to [learn about State](/react-native/docs/state.html).

59
docs/State.md Normal file
View File

@ -0,0 +1,59 @@
---
id: state
title: State
layout: docs
category: The Basics
permalink: docs/state.html
next: style
---
There are two types of data that control a component: `props` and `state`. `props` are set by the parent and they are fixed throughout the lifetime of a component. For data that is going to change, we have to use `state`.
In general, you should initialize `state` in the constructor, and then call `setState` when you want to change it.
For example, let's say we want to make text that blinks all the time. The text itself gets set once when the blinking component gets created, so the text itself is a `prop`. The "whether the text is currently on or off" changes over time, so that should be kept in `state`.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text, View } from 'react-native';
class Blink extends Component {
constructor(props) {
super(props);
this.state = {showText: true};
// Toggle the state every second
setInterval(() => {
this.setState({ showText: !this.state.showText });
}, 1000);
}
render() {
let display = this.state.showText ? this.props.text : ' ';
return (
<Text>{display}</Text>
);
}
}
class BlinkApp extends Component {
render() {
return (
<View>
<Blink text='I love to blink' />
<Blink text='Yes blinking is so great' />
<Blink text='Why did they ever take this out of HTML' />
<Blink text='Look at me look at me look at me' />
</View>
);
}
}
AppRegistry.registerComponent('BlinkApp', () => BlinkApp);
```
In a real application, you probably won't be setting state with a timer. You might set state when you have new data arrive from the server, or from user input. You can also use a state container like [Redux](http://redux.js.org/index.html) to control your data flow. In that case you would use Redux to modify your state rather than calling `setState` directly.
State works the same way as it does in React, so for more details on handling state, you can look at the [React.Component API](https://facebook.github.io/react/docs/component-api.html).
At this point, you might be annoyed that most of our examples so far use boring default black text. To make things more beautiful, you will have to [learn about Style](/react-native/docs/style.html).

8
docs/Basics-Style.md → docs/Style.md
View File

@ -4,7 +4,7 @@ title: Style
layout: docs
category: The Basics
permalink: docs/style.html
next: basics-dimensions
next: height-and-width
---
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`.
@ -41,8 +41,12 @@ const styles = StyleSheet.create({
},
});
AppRegistry.registerComponent('AwesomeProject', () => LotsOfStyles);
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](/react-native/docs/text.html) 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](/react-native/docs/height-and-width.html).

53
docs/Tutorial.md Normal file
View File

@ -0,0 +1,53 @@
---
id: tutorial
title: Tutorial
layout: docs
category: The Basics
permalink: docs/tutorial.html
next: props
---
React Native is like React, but it uses native components instead of web components as building blocks. So to understand the basic structure of a React Native app, you need to understand some of the basic React concepts, like JSX, components, `state`, and `props`. If you already know React, you still need to learn some React-Native-specific stuff, like the native components. This
tutorial is aimed at all audiences, whether you have React experience or not.
Let's do this thing.
## Hello World
In accordance with the ancient traditions of our people, we must first build an app that does nothing except say "Hello world". Here it is:
```ReactNativeWebPlayer
import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';
class HelloWorldApp extends Component {
render() {
return (
<Text>Hello world!</Text>
);
}
}
AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);
```
If you are feeling curious, you can play around with sample code directly in the web simulators. You can also paste it into your `index.ios.js` or `index.android.js` file to create a real app on your local machine.
## What's going on here?
Some of the things in here might not look like JavaScript to you. Don't panic. This is the future.
First of all, ES2015 (also known as ES6) is a set of improvements to JavaScript that is now part of the official standard, but not yet supported by all browsers, so often it isn't used yet in web development. React Native ships with ES2015 support, so you can use this stuff without worrying about compatibility. `import`, `from`, `class`, `extends`, and the `() =>` syntax in the example above are all ES2015 features. If you aren't familiar with ES2015, you can probably pick it up just by reading through sample code like this tutorial has. If you want, [this page](https://babeljs.io/docs/learn-es2015/) has a good overview of ES2015 features.
The other unusual thing in this code example is `<Text>Hello world!</Text>`. This is JSX - a syntax for embedding XML within JavaScript. Many frameworks use a special templating language which lets you embed code inside markup language. In React, this is reversed. JSX lets you write your markup language inside code. It looks like HTML on the web, except instead of web things like `<div>` or `<span>`, you use React components. In this case, `<Text>`
is a built-in component that just displays some text.
## Component and AppRegistry
So this code is defining `HelloWorldApp`, a new `Component`, and it's registering it with the `AppRegistry`. When you're building a React Native app, you'll be making new components a lot. Anything you see on the screen is some sort of component. A component can be pretty simple - the only thing that's required is a `render` function which returns some JSX to render.
The `AppRegistry` just tells React Native which component is the root one for the whole application. You won't be thinking about `AppRegistry` a lot - there will probably just be one call to `AppRegistry.registerComponent` in your whole app. It's included in these examples so you can paste the whole thing into your `index.ios.js` or `index.android.js` file and get it running.
## This App Doesn't Do Very Much
Good point. To make components do more interesting things, you need to [learn about Props](/react-native/docs/props.html).

18
docs/Basics-Component-ListView.md → docs/UsingAListView.md
View File

@ -1,19 +1,17 @@
---
id: basics-component-listview
title: ListView
id: using-a-listview
title: Using a ListView
layout: docs
category: The Basics
permalink: docs/basics-component-listview.html
next: basics-network
permalink: docs/using-a-listview.html
next: 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.
The `ListView` component displays a vertically scrolling list of changing, but similarly structured, data.
`ListView` works best for possibly lengthy datasources (e.g., from an endpoint or database), where the number of items may not be known a priori.
`ListView` works well for long lists of data, where the number of items might change over time. Unlike the more generic [`ScrollView`](/react-native/docs/using-a-scrollview.html), the `ListView` only renders elements that are currently showing on the screen, not all the elements at once.
> Unlike the more generic [`ScrollView`](/react-native/docs/basics-component-scrollview.html), the `ListView` only renders elements that are currently showing on the screen, not all the elements at once.
The `ListView` component requires two properties, `dataSource` and `renderRow`. `dataSource` is the source of information for the list. `renderRow` takes one item from the source and returns a formatted component to render.
The `ListView` component requires two props: `dataSource` and `renderRow`. `dataSource` is the source of information for the list. `renderRow` takes one item from the source and returns a formatted component to render.
This example creates a simple `ListView` of hardcoded data. It first initializes the `dataSource` that will be used to populate the `ListView`. Each item in the `dataSource` is then rendered as a `Text` component. Finally it renders the `ListView` and all `Text` components.
@ -49,3 +47,5 @@ class ListViewBasics extends Component {
// App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => ListViewBasics);
```
One of the most common uses for a `ListView` is displaying data that you fetch from a server. To do that, you will need to [learn about networking in React Native](/react-native/docs/network.html).

64
docs/UsingAScrollView.md Normal file
View File

@ -0,0 +1,64 @@
---
id: using-a-scrollview
title: Using a ScrollView
layout: docs
category: The Basics
permalink: docs/using-a-scrollview.html
next: using-a-listview
---
The [`ScrollView`](/react-native/docs/scrollview.html) is a generic scrolling container that can host multiple components and views. The scrollable items need not be homogenous, and you can scroll both vertically and horizontally (by setting the `horizontal` property).
This example creates a vertical `ScrollView` with both images and text mixed together.
```ReactNativeWebPlayer
import React, { Component } from 'react';
import{ AppRegistry, ScrollView, Image, Text, View } from 'react-native'
class IScrolledDownAndWhatHappenedNextShockedMe extends Component {
render() {
return(
<ScrollView>
<Text style={{fontSize:96}}>Scroll me plz</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>If you like</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>Scrolling down</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>What's the best</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:96}}>Framework around?</Text>
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Image source={require('./img/favicon.png')} />
<Text style={{fontSize:80}}>React Native</Text>
</ScrollView>
);
}
}
AppRegistry.registerComponent(
'IScrolledDownAndWhatHappenedNextShockedMe',
() => IScrolledDownAndWhatHappenedNextShockedMe);
```
`ScrollView` works best to present a small amount of things of a limited size. All the elements and views of a `ScrollView` are rendered, even if they are not currently shown on the screen. If you have a long list of more items that can fit on the screen, you should use a `ListView` instead. So let's [learn about the ListView](/react-native/docs/using-a-listview.html) next.