From 4cbcc23006eb76a34402ef90c2b751dd2d33d936 Mon Sep 17 00:00:00 2001 From: Website Deployment Script Date: Thu, 23 Jun 2016 02:10:00 +0000 Subject: [PATCH] Updated docs for next --- releases/next/docs/basics-component-image.html | 6 +++--- .../next/docs/basics-component-scrollview.html | 16 ++++++++-------- releases/next/docs/basics-component-text.html | 6 +++--- .../next/docs/basics-component-textinput.html | 4 ++-- releases/next/docs/basics-component-view.html | 4 ++-- 5 files changed, 18 insertions(+), 18 deletions(-) diff --git a/releases/next/docs/basics-component-image.html b/releases/next/docs/basics-component-image.html index 12cc04f82b2..0919027b957 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

The Basics

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'; +Image – React Native | A framework for building native apps using React
React Nativenext

The Basics

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 AwesomeProject = () => { return ( - <Image source={require('./img/check.png')} /> + <Image source={require('./img/favicon.png')} /> ); } // App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Next →
© 2016 Facebook Inc.
React Nativenext

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ScrollView #

Edit on GitHub

Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.

The ScrollView 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 and ListView are specialized scrollable containers.

This contrived example creates a horizontal ScrollView with a static amount of heterogenous elements (images and text).

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

The Basics

Guides

Guides (iOS)

Guides (Android)

components

apis

ScrollView #

Edit on GitHub

Given the screen sizes of mobile devices, the ability to scroll through data is generally paramount for a proper usability experience.

The ScrollView 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 and ListView are specialized scrollable containers.

This contrived example creates a horizontal ScrollView with a static amount of heterogenous elements (images and text).

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')} /> + <Image source={require('./img/favicon.png')} /> </View> <View> - <Image source={require('./img/check.png')} /> + <Image source={require('./img/favicon.png')} /> </View> <View> - <Image source={require('./img/check.png')} /> + <Image source={require('./img/favicon.png')} /> </View> <View> <Text style={{fontSize:96}}>Text1</Text> @@ -26,13 +26,13 @@ <Text style={{fontSize:96}}>Text4</Text> </View> <View> - <Image source={require('./img/check.png')} /> + <Image source={require('./img/favicon.png')} /> </View> <View> - <Image source={require('./img/check.png')} /> + <Image source={require('./img/favicon.png')} /> </View> <View> - <Image source={require('./img/check.png')} /> + <Image source={require('./img/favicon.png')} /> </View> <View> <Text style={{fontSize:96}}>Text5</Text> @@ -46,7 +46,7 @@ }); -AppRegistry.registerComponent('MyApp', () => SimpleScrollView);
Next →
© 2016 Facebook Inc.
React Nativenext

The Basics

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'; +Text – React Native | A framework for building native apps using React
React Nativenext

The Basics

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 AwesomeProject = () => { @@ -8,7 +8,7 @@ const AwesomeProject = } // App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

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

import React from 'react'; +AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

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

import React from 'react'; import { AppRegistry, Text } from 'react-native'; var AwesomeProject = React.createClass({ @@ -26,7 +26,7 @@ import { AppRegistry}); // App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Next →
© 2016 Facebook Inc.
React Nativenext

The Basics

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'; +TextInput – React Native | A framework for building native apps using React
React Nativenext

The Basics

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 AwesomeProject = () => { @@ -19,7 +19,7 @@ const AwesomeProject = } // App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Next →
© 2016 Facebook Inc.
React Nativenext

The Basics

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'; +View – React Native | A framework for building native apps using React
React Nativenext

The Basics

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 AwesomeProject = () => { @@ -10,7 +10,7 @@ const AwesomeProject = } // App registration and rendering -AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
Next →
© 2016 Facebook Inc.