【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础

http://blog.csdn.net/xiaominghimi/article/details/51397172
http://blog.csdn.net/xiaominghimi/article/details/51397172 http://blog.csdn.net/xiaominghimi/article/details/51397172
 

【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础

标签： Reactnativehimiflexboxflex
2016-05-13 17:38 1389人阅读 评论(0) 收藏 举报


 分类：

【React Native 跨平台应用开发】（13） 


版权声明：本文为博主原创文章，未经博主允许不得转载。

本站文章均为 李华明Himi 原创,转载务必在明显处注明： 

转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2222.html

Himi在写React 时主要遇到两个知识点觉得很有必要跟大家一起回顾下。

函数绑定

FlexBox 布局

 
 一：函数绑定

首先来看一段代码片段：

123456789101112131415161718

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中声明了myNameconstructor: 组件的构造函数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，更方便