"REACT NATIVE Series Tutorial Seven" Unified Android and iOS two platform program portal && Platform-Differentiated components Introduction

This site article isLi Himioriginal, reprint must indicate in obvious place:
reprinted from "Black Rice gamedev Block" original link:Http://www.himigame.com/react-native/2260.html

This article introduces two details:

1. On how to manage Index.android.js and index.ios.js in a unified way.

2. Simple introduction and use of Platform components

One: The Index.android.js and the Index.ios.js Unified management together.

Since react itself is cross-platform, the react projects created will always have their own different program entry files, such as the presentation directory structure:

650) this.width=650; "class=" Alignnone size-medium wp-image-2261 "src=" http://www.himigame.com/wp-content/uploads/ 2016/05/ataa-202x300.jpg "alt=" Ataa "width=" 202 "height=" "style=" margin:0px;padding:1px;border:1px solid RGB ( 97,146,140); font-family:inherit;font-size:inherit;font-style:inherit;line-height:inherit;height:auto; "/>

ID 1: Here is the project folder of two platforms, here is the general platform for different configurations, embedded third-party plug-ins and other proprietary platform related settings and add places.

Identifies different portal files that are called by 2:react on different platforms.

Under normal circumstances, we simply do not need to go through two different portals as long as we do not involve feature codes, components, or plugins that are unique to a particular platform. Otherwise, run the code snippet on Android that may run under Index.ios and copy it to Index.android, and vice versa.

So we can create a new component class and let the two platforms display this class together to avoid the wasted time of the back-and-forth copying.

1. Let's say we've created a new component class called Main.js.

2. Then index.ios.js as follows:

Import React, {appregistry, Component, View,} from ' react-native '; Import Main from './main ';   Class Awesomeproject extends Component {render () {return (<Main/>); }}appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

3.index.android.js as follows:

Import React, {appregistry, Component, View,} from ' react-native '; Import Main from './main '; Class Awesomeproject extends Component {render () {return (<Main/>);}} Appregistry.registercomponent (' Awesomeproject ', () = Awesomeproject);

This unified display of the contents of the main component, in the future, whether on Android or iOS platform can be perfectly compatible, small details, it is estimated that everyone will understand.

Two. Simple introduction and use of Platform components

Sometimes we differentiate between platforms, such as top-up, adaptation issues, access to a third-party SDK, or interaction with native platform components, and so on.

At this point we need to provide the Platform components of RN ~ The use is very simple, not much to repeat.

Example:

Code Snippet 1: (Import Platform component)

Import React, {... Platform, ...}

Code Snippet 2:

Testalert () {    if (platform.os ===  ' iOS ') {       Alert.alert (' Test current platform ',  ' iOS platform ');     }else if (platform.os ===  ' Android ') {      alert.alert (' Test current platform ',  ' Android platform ');    }   }   render ()  {    return  (   <View  Style={styles.himiviewstyle} >   <text style={styles.himitextstyle}>himi  React Native  Tutorial </text>         <view  style={styles.himiViewStyle}>          < Touchablehighlight            underlaycolor= ' #f00 '             onpress={this.testalert.bind (This)}             >             <Text style={{fontSize:20}}> Click to view current platform </Text>           </TouchableHighlight>        </View>       </View>    )   }

Mainly look at the contents of the Testalert function, through Platform.os get the current platform type and Android/ios do compare can be learned.

The results are as follows (click to view the dynamic graph):

650) this.width=650; "class=" Alignnone size-medium wp-image-2262 "src=" http://www.himigame.com/wp-content/uploads/ 2016/05/user27-162x300.gif "alt=" User27 "width=" 162 "height=" "style=" margin:0px;padding:1px;border:1px solid RGB (97,146,140); font-family:inherit;font-size:inherit;font-style:inherit;line-height:inherit;height:auto; "/>

This article is from the "Li Himi" blog, please be sure to keep this source http://xiaominghimi.blog.51cto.com/2614927/1783130

"REACT NATIVE Series Tutorial Seven" Unified Android and iOS two platform program portal && Platform-Differentiated components Introduction