React Native基础教程
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;
最终的执行结果：
浙公网安备 33010602011771号