Facebook React Native Chinese Tutorial One: Introduction

React Native Chinese version

Facebook launched a JavaScript-based open source framework [React Native] at the [React.js Conf] (http://conf.reactjs.com/) Conference (HTTP// facebook.github.io/react-native/), this Chinese course is translated from [React native Official document] (http://facebook.github.io/react-native/docs/ getting-started.html).

React Native combines the benefits of Web apps and Native apps with JavaScript to develop native IOS and Android apps. In JavaScript, use React abstract OS native UI components instead of DOM elements to render.

React Native enables you to build a world-class application experience on your on-premises platform using a consistent, JavaScript-based and [React] (http://wiki.jikexueyuan.com/project/react/) development experience. React Native focuses on the development efficiency of all the platforms that developers care about-developers can easily write code efficiently for any platform, just by learning one language. Facebook has used React Native in multiple application offerings and will continue to invest in React Native.

[React Native Introduction] (http://wiki.jikexueyuan.com/project/react-native/getting-started.html)

Native IOS Components

With reactnative, you can use standard platform components, such as Uitabbar and Uinavigationcontroller on the IOS platform. This allows your application to have a consistent look and feel with the native platform and maintain high quality. Using the appropriate React components, such as the iOS tab bar and iOS navigator, these components can be easily incorporated into your application.

var React = require (' react-native ');

var {tabbarios, Navigatorios} = React;

var App = React.createclass ({

Render:function () {

Return (

<TabBarIOS>

<tabbarios.item title= "React Native" selected={true}>

<navigatorios initialroute={{title: ' React Native '}}/>

</TabBarIOS.Item>

</TabBarIOS>

);

},

});

Asynchronous execution

All operations between the JavaScript application code and the native platform are performed asynchronously, and the native module can use additional threads. This means that we can decode the main thread image and save it to disk in the background, calculate the size of the text and layout without blocking the UI, and so on. As a result, React Native applications are very fluent and responsive. Communication is also fully serializable, and when running a full application, this allows us to use Chrome Developer Tools to debug JavaScript, either in the emulator or on the real machine.

See [Debug] (http://wiki.jikexueyuan.com/project/react-native/debugging.html)

650) this.width=650; "src=" Http://wiki.jikexueyuan.com/project/react-native/images/chrome-breakpoint.png "width=" "Height=" "alt=" Chrome-breakpoint.png "/>

Touch processing

IOS has a very powerful system called Responder Chain, which can be used to respond to events in a complex view hierarchy, but there are no tools like that in the Web. The React Native enables similar response systems and provides a high level of components, such as touchablehighlight, that can be moderately integrated with scrolling views and other elements without additional configuration.

var React = require (' react-native ');

var {ScrollView, touchablehighlight, Text} = React;

var Touchdemo = React.createclass ({

Render:function () {

Return (

<ScrollView>

<touchablehighlight onpress={() = Console.log (' pressed ')}>

<text>proper Touch handling</text>

</TouchableHighlight>

</ScrollView>

);

},

});

Elastic boxes and styles

The layout view should be simple, so we introduced the Elastic box module on the Web platform into the React Native. Elastic frames are used to build the most common UI layouts, such as the stacking and embedding of alternate edges and fills. React Native also supports common Web styles, such as fontweight and StyleSheet abstractions, which provide an optimization mechanism to claim that all of your styles and layouts are applied correctly in the component, and that the components apply them to the intranet.

var React = require (' react-native ');

var {Image, StyleSheet, Text, View} = React;

var reactnative = React.createclass ({

Render:function () {

Return (

<view style={styles.row}>

<image

Source={{uri: ' Http://facebook.github.io/react/img/logo_og.png '}}

Style={styles.image}

/>

<view style={styles.text}>

<text style={styles.title}>

React Native

</Text>

<text style={styles.subtitle}>

Build high quality mobile apps using React

</Text>

</View>

</View>

);

},

});

var styles = Stylesheet.create ({

Row: {flexdirection: ' Row ', margin:40},

Image: {width:40, height:40, marginright:10},

Text: {flex:1, justifycontent: ' Center '},

Title: {fontsize:11, fontweight: ' Bold '},

Subtitle: {fontsize:10},

});

Polyfills

The focus of React Native is to change the way the View code is written. Next, we look at what's common in the web and put those APIs where it's appropriate. You can use NPM to install JavaScript libraries, which are used to incorporate top-level features in React Native, such as Xmlhttprequest,window.requestanimationframe and Navigator.geolocation. We are expanding the available APIs and are committed to contributing to the open source community.

var React = require (' react-native ');

var {Text} = React;

var geoinfo = React.createclass ({

Getinitialstate:function () {

return {position: ' unknown '};

},

Componentdidmount:function () {

Navigator.geolocation.getCurrentPosition (

(position) = This.setstate ({position}),

(Error) = Console.error (Error)

);

},

Render:function () {

Return (

<Text>

Position: {json.stringify (This.state.position)}

</Text>

);

},

});

Scalability

Using React Native creates a nice application without writing a single line of native code, and React Native can be extended by customizing native views and modules-that is, you can reuse anything you've built, and import and use your favorite native libraries. In order to create a simple module in IOS, you need to create a new class to implement the Rctbridgemodule protocol and wrap the functionality that you want to make available to JavaScript in Rct_export_method. In addition, the class itself must be explicitly exported with Rct_export_module ().

Objective-c

#import "RCTBridgeModule.h"

@interface Mycustommodule:nsobject <RCTBridgeModule>

@end

@implementation Mycustommodule

Rct_export_module ();

Available as NativeModules.MyCustomModule.processString

Rct_export_method (processstring: (NSString *) input callback: (Rctresponsesenderblock) callback)

{

Callback (@[[input stringbyreplacingoccurrencesofstring:@ "Goodbye" withstring:@ "Hello"];]);

}

@end

Javascript

var React = require (' react-native ');

var {nativemodules, Text} = React;

var Message = React.createclass ({

Render:function () {

Getinitialstate () {

return {text: ' Goodbye World '};

},

Componentdidmount () {

NativeModules.MyCustomModule.processString (This.state.text, (text) + = {

This.setstate ({text});

});

},

Return (

<Text>{this.state.text}</Text>

);

},

});

The custom IOS view can be exposed through the subclass Rctviewmanager, implementing the-(UIView *) View method and using the Rct_export_view_property macro to export the properties. Then a simple JavaScript file will connect to these points.

Objective-c

#import "RCTViewManager.h"

@interface Mycustomviewmanager:rctviewmanager

@end

@implementation Mycustomviewmanager

-(UIView *) view

{

return [[Mycustomview alloc] init];

}

Rct_export_view_property (MyCustomProperty);

@end

Javascript

Module.exports = Createreactiosnativecomponentclass ({

Validattributes: {mycustomproperty:true},

Uiviewclassname: ' Mycustomview ',

});

[React Native Introduction] (http://wiki.jikexueyuan.com/project/react-native/getting-started.html)

> Source : http://wiki.jikexueyuan.com/project/react-native/

This article is from the wiki blog, so be sure to keep this source http://jkxywiki.blog.51cto.com/1640448/1689243

Facebook React Native Chinese Tutorial One: Introduction