ReactNative基础教程
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 = ateClass({ =====>(创建组件名称是：FirstApp，关键字是createClass)
12
13 render: function() { =====>(渲染⽅法，组件中必须得⽅法)
14
15 return (
16
17 <View style={ainer}> =====>(这⼏⾏就是JSX语法写的)
18
19 <Text style={{fontSize: 18}}>这是我的第⼀个React Native APP</Text> =====>(显⽰在⼿机屏幕上的内容在这写)
20
21 </View> =====>（这⾥⽤view包起来，⽽不是⽤div）
22 );
23 }
24 });
25
26 var styles = ate( =====>(创建样式，看上⾯加粗划线的代码，可以在这⾥定义，也可以直接写在代码⾥⾯，如上⾯的fontSize:18)
27 container: {
28 flex: 1,
29 justifyContent: 'center',
30 alignItems: 'center',
31 backgroundColor: 'orange'
32 }
33 });
34
isterComponent('FirstApp', () => FirstApp); =====>(注册应⽤，使能够加载运⾏, FirstApp就是你的App名称)
36
ports = FirstApp; =====>(导出组件，使能够在别的组件中⽤)
最终的打印结果：
2、React Native的Flexbox布局（样式）
这个⽐较简单，需⾃⼰多实践就⾏，简单说⼏个：
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 = ateClass({
12
13 render: function() {
14
15 return (
16
17 <View style={ainer}>
18
19 <HelloWorld myText='我是第⼀' />
20 <HelloWorld myText='我是第⼆' /> =====>(这⾥三个是引⽤了下⾯定义的组件，HelloWorld⾃动成为FirstApp的⼦组件)
21 <HelloWorld myText='我是第三' /> =====>(myText是传给HelloWorld的属性)
22
23 </View>
24 );
25 }
26 });
27
28 var HelloWorld = ateClass({
29
30 render: function() {
31
32 return (
33
34 <View>
35 <Text style={{fontSize: 20, color: 'red'}}>{Text}</Text>
36 </View> =====>(从⽗组件传过来的myText属性，⽤Text接收)
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 = ateClass({
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() {
react耐克图片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={ainer}>
50
51 <HelloWorld myText='我是第⼀' />
52 <HelloWorld myText='我是第⼆' />
53 <HelloWorld myText='我是第三' />
54
55 </View>
56 );
57 }
58 });
59
60 var HelloWorld = ateClass({
61
62 render: function() {
63
64 return (
65
66 <View>
67 <Text style={{fontSize: 20, color: 'red'}}>{Text}</Text>
68 </View>
69 );
70 }
71 });
72
73 var styles = ate({
74 container: {
75 flex: 1,
76 justifyContent: 'center',
77 alignItems: 'center',
78 backgroundColor: 'orange'
79 }
80 });
81
isterComponent('FirstApp', () => FirstApp);
83
ports = 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 = ateClass({
12
13 render: function() {
14
15 console.log('render');
16
17 return (
18
19 <View style={ainer}>
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 = ateClass({
31
32 render: function() {
33
34 return (
35
36 <View>
37 <Text style={{fontSize: 20, color: 'red'}}>{Text}</Text> =====>(HelloWorld通过props来接收传
38 </View>
39 );
40 }
41 });
42
43 var styles = ate({
44 container: {
45 flex: 1,
46 justifyContent: 'center',
47 alignItems: 'center',
48 backgroundColor: 'orange'
49 }
50 });
51
isterComponent('FirstApp', () => FirstApp);
ports = 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 = ateClass({
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 {Value} =====>(第⼀次加载数据的时候会获取初始值，⽤state来获取到初始值)
35 </Text>
36 </View>
37 );
38 },
39
40 changeText: function() {
41
42 this.setState({ =====>(这是⽂字的点击事件，当我想要更改state初始值的时候，需要⽤到setState来更改)
43
44 myValue: '我是修改后的值' =====>(修改初始值myValue，当我修改这⾥后，系统会⾃动去调⽤render函数⽅法，Value会⾃动更新成最新的值，即：我是修改后的值)
45 })
46 }
47 });
48
49
isterComponent('FirstApp', () => FirstApp);
51
ports = FirstApp;
最终的打印结果：
c、ref: ⽤来指⽰render中某组件，调⽤的话就是x
1 'use strict';
2
3 var React = require('react-native');
5 AppRegistry,
6 StyleSheet,
7 Text,
8 View,
9 Image,
10 TouchableHighlight
11 } = React;
12
13 var FirstApp = ateClass({
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: 'pic14.nipic/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的属性来看看：',Img.props); =====>(打印出上⾯的Image来看看)
36 }
37 });
38
isterComponent('FirstApp', () => FirstApp);
40
ports = FirstApp;
最终的执⾏结果：
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论