【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础
转载自【黑米GameDev街区】 原文链接:http://www.himigame.com/react-native/2222.html
Himi在写React 时主要遇到两个知识点觉得很有必要跟大家一起回顾下。
函数绑定
FlexBox 布局
一：函数绑定
首先来看一段代码片段：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
constructor(props) {
super(props);
this.state = {
myName:'I am MyName!',
};
}
componentWillMount() {
this.state.myName='cwm';
}
testFun1(){
this.state.myName='tf1';
Alert.alert('Himi', ' testFun1 ');
}
testFun2(){
Alert.alert('Himi', ' testFun2 ');
}
在state中声明了myName
constructor: 组件的构造函数
componentWillMount ： 组件预加载前调用的生命周期函数
testFun1、 testFun2 ：是两个自定义的函数。
继续看render中的一段：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<TouchableHighlight
underlayColor='#4169e1'
onPress={this.testFun1}
>
<Image
source={require('./res/himi.png')}
style={{width: 70, height: 70}}
/>
</TouchableHighlight>
<TouchableHighlight
underlayColor='#4169e1'
onPress={this.testFun2}
>
<Image
source={require('./res/himi.png')}
style={{width: 70, height: 70}}
/>
</TouchableHighlight>
这里创建了两个图片组件且都添加了触摸组件，分别绑定自定义的函数testFun1 与 testFun2
当我们点击第一个图片时会报错，运行效果如下：（点击查看动态图）
错误是说this没有undefined，原因是因为当想在自定义的函数中使用this，那么需要进行函数绑定。
函数绑定：函数进行 bind（绑定） 可以确保在函数中的 this 作为组件实例的引用,也就是说你想在自定义的函数中使用this，那么请先进行将此函数bind(this)
那么细心的童鞋会发现！为什么在componentWillMount 函数中也使用了this却通过了？因为componentWillMount 是组件的生命周期函数。
那么常用的函数绑定方式有如下几种：
1. 在生命周期函数中绑定，如下：
1
this.testFun1 = this.testFun1.bind(this)
2. 使用的地方直接绑定，如下：
1
onPress={this.testFun1.bind(this)}
3. 直接在使用的地方直接lambda，更方便 如下：
JavaScript
1
2
3
4
onPress={()=>{
this.state.myName='tf1';
Alert.alert('Himi', ' testFun1 ');
}}
一：FlexBox 布局
关于CSS 的FlexBox 本篇不重新赘述了，一来是因为网上一搜一大把的教程，二来不一定有别人写的仔细 – -… 。但是，Himi这里推荐两个链接，学习足以：
1. 详细介绍与分析： http://www.tuicool.com/articles/vQn6ZrU
2. 直观的教程：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
声明：本站所有文章资源内容，如无特殊说明或标注，均为采集网络资源。如若本站内容侵犯了原著者的合法权益，可联系本站删除。
