React-native Basic Tutorials (1)

Reprint Link: http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/react-native-foundation-course/

React-native is Facebook's open source project, with the slogan "Learning Once,write Anywhere", designed to unify the view's writing.

First, react-native basic grammar template

' Use strict '; =====> (Strict mode)

var React = require (' react-native '); =====> (Import module react-native, keyword is: require)

var {

Appregistry,

StyleSheet, =====> (declaring system components to be used)

Text,

View,

} = React;

var Firstapp = React.createclass ({ =====> (Create component name is: Firstapp, keyword is createclass)

render:function () { =====> (render method, required method in component)

Return (

<view style={styles.container}>=====> (these lines are written in Jsx grammar)

<text style={{fontsize:18}}> This is my first react Native app</text> =====> (the content shown on the phone screen is written here)

</View>=====> (This is wrapped up in View, not with a Div)

 );

 }

});

var styles = Stylesheet.create (=====> (create style, look at the above underlined code, can be defined here, can also be written directly in the code, such as the above fontsize:18)

container: {

Flex:1,

justifycontent: ' Center ',

alignitems: ' Center ',

backgroundcolor: ' Orange '

 }

});

Appregistry.registercomponent (' Firstapp ', () = Firstapp); =====> (Register app to enable load run, Firstapp is your app name)

Module.exports = Firstapp; =====> (export components so that they can be used in other components)

Second, the react-native of the components, we can put the sub-function you need to customize the meter to write code, and then put all the modules together, is a complete program (so that the sub-code look more clear)

The code looks like this:

' Use strict ';

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

var {

Appregistry,

StyleSheet,

Text,

View

}=react;

var Firstapp=react.createclass ({

Render:function () {

<view style={styles.container}>

</View>

}

});

var Helloworld=react.createclass ({

Render:function () {

Return (

<View>

<text style={{fontsize:20,color: ' Red '}}>{this.props.mytext}</text>

=====> (MyText attribute passed from parent component, received with This.props.myText)

</View>

)

}

})

Three, react-native life cycle

A,getinitialstate: called before the build is mounted, we typically define the initial state value inside

b,getdefaultprops: called once when the component class was created, and then the return value is cached. If the parent component does not specify a property defined in Getdefaultprops, the corresponding property in the object returned here will be merged into the this.props

　　C,Componentwillmount: Both the server side and the client are called only once, and are called immediately before the render execution is initialized

　　D, Render: perform render operations on the view

　　E,Componentdidmount: called immediately after initialization of the rendering execution, only valid for the client (server side will not be called)

f,Componentwillunmount: Called when the component is removed from the DOM , usually in the secondary method to do the necessary cleanup work

Example of the execution order of the components:

' Use strict ';

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

var {

Appregistry,

StyleSheet,

Text,

View,

} = React;

var Firstapp = React.createclass ({

getdefaultprops:function () {

Console.log (' Getdefaultprops ');

},

Getinitialstate:function () {

Console.log (' getinitialstate ')

return {};

},

Componentwillmount:function () {

Console.log (' Componentwillmount ');

 },

Componentdidmount:function () {

Console.log (' Componentdidmount ');

 },

Componentwillunmount:function () {

Console.log (' Componentwillunmount ');

 },

Ender:function () {

Console.log (' render ');

Return (

<view style={styles.container}>

</View>

 );

 }

});

var HelloWorld = React.createclass ({

render:function () {

Return (

<View>

<text style={{fontsize:20, color: ' Red '}}>{this.props.mytext}</text>

</View>

 );

 }  

});

var styles = Stylesheet.create ({

container: {

Flex:1,

justifycontent: ' Center ',

alignitems: ' Center ',

backgroundcolor: ' Orange '

 }

});

Appregistry.registercomponent (' Firstapp ', () = Firstapp);

Module.exports = Firstapp;

React-native Basic Tutorials (1)