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

Add ScrollView to Basics docs 

Summary:
Add basic information about the generic `ScrollView` -- talk a bit about how it renders elements and a quick compare against something like a `ListView`. Provide a simple example.

Fixes #8261
Closes https://github.com/facebook/react-native/pull/8266

Differential Revision: D3465105

Pulled By: JoelMarcey

fbshipit-source-id: 3a2e1eac6e877669763fc6b8bb0fc78ebe870ab1
This commit is contained in:
Joel Marcey 2016-06-21 13:24:21 -07:00 committed by Facebook Github Bot 7
parent b0dbb4210f
commit 6668cd2129
3 changed files with 76 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
docs/Basics-Component-ListView.md
View File

@ -7,7 +7,11 @@ permalink: docs/basics-component-listview.html
next: basics-integration-with-existing-apps
---
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/tutorial-component-view.html) that displays a vertically scrolling list of changing data.
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.
`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.
> 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 actual source of information that will be part of the list. `renderRow` takes the data and returns a renderable component to display.

70
docs/Basics-Component-ScrollView.md Normal file
View File

@ -0,0 +1,70 @@
---
id: basics-component-scrollview
title: ScrollView
layout: docs
category: 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).
```JavaScript
import React, { AppRegistry, ScrollView, Image, Text, View } from 'react-native'
var SimpleScrollView = React.createClass({
render(){
return(
<ScrollView horizontal={true}>
<View>
<Image source={require('./img/check.png')} />
</View>
<View>
<Image source={require('./img/check.png')} />
</View>
<View>
<Image source={require('./img/check.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/check.png')} />
</View>
<View>
<Image source={require('./img/check.png')} />
</View>
<View>
<Image source={require('./img/check.png')} />
</View>
<View>
<Text style={{fontSize:96}}>Text5</Text>
</View>
<View>
<Text style={{fontSize:96}}>Text6</Text>
</View>
</ScrollView>
);
}
});
AppRegistry.registerComponent('MyApp', () => SimpleScrollView);
```

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

@ -4,7 +4,7 @@ title: TextInput
layout: docs
category: Basics
permalink: docs/basics-component-textinput.html
next: basics-component-listview
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.