React Native基礎教程

　　React Native是Facebook開源的框架，用來寫Android和iOS移動App。它的口號是 「Learning once, write anywhere」，目的是統一View的編寫。我我的也是因爲公司須要，故入坑學習，下面就個人理解簡單總結下React Native的基本知識。

　　須要的預備知識：

　　　　一、學習JavaScript(最新JS核心標準ES6)

　　　　二、簡單學習React.js(開發網頁)

　　　　三、學習JSX(HTML和JavaScript的混寫)

　

　　我主要講一下幾個方面：

　　　　一、React Native的基本模板寫法

　　　　二、React Native的Flexbox佈局

　　　　三、React Native組件化

　　　　四、React Native的生命週期

　　　　五、React Native的數據狀態引用

 

　　一、React Native的基本模板寫法

 1 'use strict';  =====>（嚴格模式）  2 
 3 var React = require('react-native');   =====>(導入模塊react-native，關鍵字是： require)  4 var {
 5   AppRegistry,
 6   StyleSheet,     =====>(聲明要用到得系統組件)  7   Text,
 8   View,
 9 } = React;
10 
11 var FirstApp = React.createClass({   =====>(建立組件名稱是：FirstApp， 關鍵字是createClass) 12   
13     render: function() {   =====>(渲染方法， 組件中必須得方法) 14 
15         return (
16 
17               <View style={styles.container}>　　　　　　　　　　　　　　　　　　　　　　　　=====>(這幾行就是JSX語法寫的)
18 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
19                   <Text style={{fontSize: 18}}>這是個人第一個React Native APP</Text>   =====>(顯示在手機屏幕上的內容在這寫) 
20 
21               </View>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　=====>（這裏用view包起來，而不是用div）
22           );
23     }
24 });
25 
26 var styles = StyleSheet.create( =====>(建立樣式，看上面加粗劃線的代碼，能夠在這裏定義，也能夠直接寫在代碼裏面，如上面的fontSize:18) 27   container: {
28       flex: 1,
29       justifyContent: 'center',      
30       alignItems: 'center',
31       backgroundColor: 'orange'
32     }
33 });
34 
35 AppRegistry.registerComponent('FirstApp', () => FirstApp);   =====>(註冊應用，使可以加載運行, FirstApp就是你的App名稱) 36 
37 module.exports = FirstApp; =====>(導出組件，使可以在別的組件中用)

　　最終的打印結果：

　　　　

　　二、React Native的Flexbox佈局（樣式）

　　官網的連接：http://facebook.github.io/react-native/docs/flexbox.html#content

　　這個比較簡單，需本身多實踐就行，簡單說幾個：

　　flex: 這個是一個靈活的佈局屬性，相似比例， 好比你想在一行中定義三張圖片，它們的寬比爲1：3：2，那麼你能夠分別設置它們的flex爲: 1，3，2

　　flexDirection: 這個是設置佈局的方向（column 和 row）, 視圖排列方法是列布局仍是行佈局

　　justifyContent 和 alignItems: 這2個是水平和垂直佈局，能夠設置水平居中，垂直居中等

　　margin(包括marginLeft, marginRight, marginTop, marginBottom) :這個是設置間距（距離左，右， 上， 下）多少

　　position (包括absolute和relative): 這個是設置視圖的位置是固定的仍是相對的

　　　　......

 

　　三、React Native的組件化， 咱們能夠分功能來自定義模塊寫代碼，而後把全部模塊組合起來，就是一個完整的程序了

 1 'use strict';
 2 
 3 var React = require('react-native');
 4 var {
 5   AppRegistry,
 6   StyleSheet,
 7   Text,
 8   View,
 9 } = React;
10 
11 var FirstApp = React.createClass({
12   
13     render: function() {
14 
15         return (
16 
17               <View style={styles.container}>
18 
19                   <HelloWorld myText='我是第一' />
20                   <HelloWorld myText='我是第二' />   =====>(這裏三個是引用了下面定義的組件，HelloWorld自動成爲FirstApp的子組件)
21                   <HelloWorld myText='我是第三' />　 =====>(myText是傳給HelloWorld的屬性)
22 
23               </View>
24           );
25     }
26 });
27 
28 var HelloWorld = React.createClass({
29   
30     render: function() {
31 
32         return (
33 
34               <View>
35                   <Text style={{fontSize: 20, color: 'red'}}>{this.props.myText}</Text>  
36               </View>　　　　　　　　　　　　　　　　　　　　=====>(從父組件傳過來的myText屬性，用this.props.myText接收)
37           );
38     }  
39 });

　　最終的打印結果：

　　

　　

　　四、React Native的生命週期

　　a、getInitialState: 在組建被掛載以前調用，咱們通常在裏面定義初始state值

　　b、getDefaultProps: 在組件類建立的時候調用一次，而後返回值被緩存下來。若是父組件沒有指定 getDefaultProps 中定義的屬性，則此處返回的對象中的相應屬性將會合併到 this.props

　　c、componentWillMount: 服務器端和客戶端都只調用一次，在初始化渲染執行以前馬上調用

　　d、render: 執行視圖的渲染操做

　　e、componentDidMount: 在初始化渲染執行以後馬上調用一次，僅客戶端有效（服務器端不會調用）

 

　　f、componentWillUnmount: 組件從DOM中移除時調用，通常在次方法進行必要的清理工做

 1 'use strict';
 2 
 3 var React = require('react-native');
 4 var {
 5   AppRegistry,
 6   StyleSheet,
 7   Text,
 8   View,
 9 } = React;
10 
11 var FirstApp = React.createClass({
12     
13     getDefaultProps: function() {
14 
15         console.log('getDefaultProps');
16 
17     },
18 
19     getInitialState: function() {
20 
21         console.log('getInitialState');
22 
23         return {
24 
25         };
26     },
27 
28     componentWillMount: function() {
29 
30         console.log('componentWillMount');
31     },
32 
33     componentDidMount: function() {
34 
35         console.log('componentDidMount');
36     },
37 
38     componentWillUnmount: function() {
39 
40         console.log('componentWillUnmount');
41     },
42 
43     render: function() {
44 
45         console.log('render');
46 
47         return (
48 
49               <View style={styles.container}>
50 
51                   <HelloWorld myText='我是第一' />
52                   <HelloWorld myText='我是第二' />
53                   <HelloWorld myText='我是第三' />
54 
55               </View>
56           );
57     }
58 });
59 
60 var HelloWorld = React.createClass({
61   
62     render: function() {
63 
64         return (
65 
66               <View>
67                   <Text style={{fontSize: 20, color: 'red'}}>{this.props.myText}</Text>
68               </View>
69           );
70     }  
71 });
72 
73 var styles = StyleSheet.create({
74   container: {
75       flex: 1,
76       justifyContent: 'center',
77       alignItems: 'center',
78       backgroundColor: 'orange'
79     }
80 });
81 
82 AppRegistry.registerComponent('FirstApp', () => FirstApp);
83 
84 module.exports = FirstApp;

　　　最終的打印結果（執行順序）：

 

　　五、React Native的數據狀態引用

　　a、props: 屬性， 用於不一樣組件之間數值傳遞，通常是從父組件中傳值給子組件，子組件最好不要修改此值，而由父組件來修改，進而更新子組件的值

　　仍是上面的栗子：

 1 'use strict';
 2 
 3 var React = require('react-native');
 4 var {
 5   AppRegistry,
 6   StyleSheet,
 7   Text,
 8   View,
 9 } = React;
10 
11 var FirstApp = React.createClass({
12 
13     render: function() {
14 
15         console.log('render');
16 
17         return (
18 
19               <View style={styles.container}>
20 
21                   <HelloWorld myText='我是第一' />
22                   <HelloWorld myText='我是第二' />  =====>(HelloWorld嵌套在FirstApp中，因此HelloWorld自動成爲了FirstApp的子組　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　件，myText就是要傳遞給子組件的屬性值)
23                   <HelloWorld myText='我是第三' />
24 
25               </View>
26           );
27     }
28 });
29 
30 var HelloWorld = React.createClass({
31   
32     render: function() {
33 
34         return (
35 
36               <View>
37                   <Text style={{fontSize: 20, color: 'red'}}>{this.props.myText}</Text> =====>(HelloWorld經過props來接收傳　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　過來的myText屬性值)
38               </View>
39           );
40     }  
41 });
42 
43 var styles = StyleSheet.create({
44   container: {
45       flex: 1,
46       justifyContent: 'center',
47       alignItems: 'center',
48       backgroundColor: 'orange'
49     }
50 });
51 
52 AppRegistry.registerComponent('FirstApp', () => FirstApp);
53 
54 module.exports = FirstApp;

　　最終的打印結果：

　　

　　b、state: 狀態，用於同一組件中數據的更新

 1 'use strict';
 2 
 3 var React = require('react-native');
 4 var {
 5   AppRegistry,
 6   StyleSheet,
 7   Text,
 8   View,
 9   TouchableHighlight
10 } = React;
11 
12 var FirstApp = React.createClass({
13 
14     getInitialState: function() {
15 
16         return {
17            myValue: '我是初始值'    =====>(設置初始值)
18         };
19         
20     },
21 
22     render: function() {
23 
24         console.log('render');
25 
26         return (
27 
28             <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
29                 <Text onPress={this.changeText}  =====>(設置文字點擊事件，當點擊的時候會調用changeText方法) 30                       style={{fontSize: 30,
31                               color: 'orange',       =====>(設置文字樣式) 32                               textAlign: 'center'}}>
33 
34                                 {this.state.myValue}   =====>(第一次加載數據的時候會獲取初始值，用state來獲取到初始值) 35                 </Text>
36             </View>
37           );
38     },
39 
40     changeText: function() {
41 
42       this.setState({     =====>(這是文字的點擊事件， 當我想要更改state初始值的時候，須要用到setState來更改) 43 
44           myValue: '我是修改後的值'  =====>(修改初始值myValue，當我修改這裏後，系統會自動去調用render函數方法，this.state.myValue會自動更新成最新的值，即：我是修改後的值)
45       })
46     }
47 });
48 
49 
50 AppRegistry.registerComponent('FirstApp', () => FirstApp);
51 
52 module.exports = FirstApp;

　　最終的打印結果：

　　           

 

　　c、ref: 用來指示render中某組件，調用的話就是this.refs.xxx.xxx

 1 'use strict';
 2 
 3 var React = require('react-native');
 4 var {
 5   AppRegistry,
 6   StyleSheet,
 7   Text,
 8   View,
 9   Image,
10   TouchableHighlight
11 } = React;
12 
13 var FirstApp = React.createClass({
14 
15     render: function() {
16 
17         console.log('render');
18 
19         return (
20 
21             <View style={{flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'yellow'}}>
22                
23                <Image
24                     ref='myImg'
25                     source={{uri: 'http://pic14.nipic.com/20110522/7411759_164157418126_2.jpg' }} 
26                     style={{width: 350, height: 350}} />    =====>(設置一張圖片，而且設置寬高爲350)
27 
28                <Text onPress={this.changePic} style={{marginTop: 50}}>改變圖片的大小</Text> ===>(點擊文字，觸發事件changePic)
29             </View>
30           );
31     },
32 
33     changePic: function() {  =====>(點擊文字會調用這個方法) 34 
35        console.log('我打印出上面的image的屬性來看看：',this.refs.myImg.props); =====>(打印出上面的Image來看看) 36     }
37 });
38 
39 AppRegistry.registerComponent('FirstApp', () => FirstApp);
40 
41 module.exports = FirstApp;

　　最終的執行結果：