React Native基礎教程
React Native是Facebook開源的框架，用來寫Android和iOS移動App。它的口號是 “Learning once, write anywhere”，目的是統一View的編寫。我個人也是由於公司需要，故入坑學習，下面就我的理解簡單總結下React Native的基本知識。
需要的預備知識：
1、學習JavaScript(最新JS核心標准ES6)
2、簡單學習React.js(開發網頁)
3、學習JSX(HTML和JavaScript的混寫)
我主要講一下幾個方面：
1、React Native的基本模板寫法
2、React Native的Flexbox布局
3、React Native組件化
4、React Native的生命周期
5、React Native的數據狀態引用
1、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; =====>(導出組件，使能夠在別的組件中用)
最終的打印結果：
2、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): 這個是設置視圖的位置是固定的還是相對的
......
3、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 });
最終的打印結果：
4、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;
最終的打印結果（執行順序）：
5、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;
最終的執行結果：
