From fd81a2c262c0937f34beb4953988e913248069d6 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Wed, 22 Jun 2016 19:30:06 +0000 Subject: [PATCH] Updated docs for next --- .../next/docs/basics-component-image.html | 6 ++--- .../next/docs/basics-component-listview.html | 14 ++++++----- releases/next/docs/basics-component-text.html | 24 ++++++++++++++++--- .../next/docs/basics-component-textinput.html | 23 ++++++++++++------ releases/next/docs/basics-component-view.html | 8 +++---- releases/next/docs/basics-components.html | 2 +- 6 files changed, 53 insertions(+), 24 deletions(-) diff --git a/releases/next/docs/basics-component-image.html b/releases/next/docs/basics-component-image.html index 1c670e4f7b0..fd633609275 100644 --- a/releases/next/docs/basics-component-image.html +++ b/releases/next/docs/basics-component-image.html @@ -1,14 +1,14 @@ -Image – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

Image #

Edit on GitHub

The other basic React Native component is the Image component. Like Text, the Image component simply renders an image.

An Image is analogous to using img 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.

import React from 'react'; +Image – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

Image #

Edit on GitHub

Another basic React Native component is the Image 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.

import React from 'react'; import { AppRegistry, Image } from 'react-native'; -const App = () => { +const AwesomeProject = () => { return ( <Image source={require('./img/check.png')} /> ); } // App registration and rendering -AppRegistry.registerComponent('MyApp', () => App);
Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

ListView #

Edit on GitHub

On mobile devices, lists are a core element in many applications. The ListView component is a special type of View 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, 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.

This example creates a simple ListView of hardcoded data. It first initializes the datasource that will be used to populate the ListView. Then it renders that ListView with that data.

A rowHasChanged function is required to use ListView. Here we just say a row has changed if the row we are on is not the same as the previous row.

import React from 'react'; -import { AppRegistry, Text, View, ListView} from 'react-native'; +ListView – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

ListView #

Edit on GitHub

On mobile devices, lists are a core element in many applications. The ListView component is a special type of View 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, 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.

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.

A rowHasChanged function is required to use ListView. Here we just say a row has changed if the row we are on is not the same as the previous row.

import React from 'react'; +import { AppRegistry, ListView, Text, View } from 'react-native'; -var SimpleList = React.createClass({ +var AwesomeList = React.createClass({ // Initialize the hardcoded data getInitialState: function() { var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); return { - dataSource: ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie']) + dataSource: ds.cloneWithRows([ + 'John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie' + ]) }; }, render: function() { return ( - <View> + <View style={{paddingTop: 22}}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} @@ -22,7 +24,7 @@ import { AppRegistry}); // App registration and rendering -AppRegistry.registerComponent('MyApp', () => SimpleList);
Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

Text #

Edit on GitHub

The most basic component in React Native is the Text component. The Text component simply renders text.

This example displays the string "Hello World!" on the device.

import React from 'react'; import { AppRegistry, Text } from 'react-native'; -const App = () => { +const AwesomeProject = () => { return ( - <Text>Hello World!</Text> + <Text style={{marginTop: 22}}>Hello World!</Text> ); } // App registration and rendering -AppRegistry.registerComponent('MyApp', () => App);
Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

TextInput #

Edit on GitHub

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 is a basic component that allows the user to enter text.

This example creates a simple TextInput box with the string Hello as the placeholder when the TextInput is empty.

import React from 'react'; -import { AppRegistry, TextInput, View } from 'react-native'; +TextInput – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

TextInput #

Edit on GitHub

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

import React from 'react'; +import { AppRegistry, Text, TextInput, View } from 'react-native'; -const App = () => { +const AwesomeProject = () => { return ( - <View> - <TextInput placeholder="Hello" /> - </View> + <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('MyApp', () => App);
Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

View #

Edit on GitHub

A View 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 for building websites.

While basic components such as Text and Image, can be displayed without a View, this is not generally recommended since the View gives you the control for styling and layout of those components.

This example 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):

import React from 'react'; +View – React Native | A framework for building native apps using React
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

View #

Edit on GitHub

A View 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):

import React from 'react'; import { AppRegistry, Text, View } from 'react-native'; -const App = () => { +const AwesomeProject = () => { return ( - <View style={{alignItems: 'center'}}> + <View style={{marginTop: 22, alignItems: 'center'}}> <Text>Hello!</Text> </View> ); } // App registration and rendering -AppRegistry.registerComponent('MyApp', () => App);
Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

Components #

Edit on GitHub

Components are the building blocks for a React Native application. A React Native user interface (UI) is specified by declaring components, possibly nested, and then those components are mapped to the native UI on the targeted platform.

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.

Next →
© 2016 Facebook Inc.
React Nativenext

Quick Start

Basics

Sample Applications

Guides

Guides (iOS)

Guides (Android)

components

apis

Components #

Edit on GitHub

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.

Next →
© 2016 Facebook Inc.