转载

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

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

函数绑定
FlexBox 布局

一：函数绑定

首先来看一段代码片段：

 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中的一段：

<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

当我们点击第一个图片时会报错，运行效果如下： （点击查看动态图）

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

错误是说this没有undefined，原因是因为当想在自定义的函数中使用this，那么需要进行函数绑定。

函数绑定：函数进行 bind（绑定）可以确保在函数中的 this 作为组件实例的引用,也就是说你想在自定义的函数中使用this，那么请先进行将此函数bind(this)

那么细心的童鞋会发现！为什么在 componentWillMount 函数中也使用了this却通过了？因为 componentWillMount 是组件的生命周期函数。

那么常用的函数绑定方式有如下几种：

1. 在生命周期函数中绑定，如下：

this.testFun1 = this.testFun1.bind(this)

2. 使用的地方直接绑定，如下：

onPress={this.testFun1.bind(this)}

3. 直接在使用的地方直接lambda，更方便 �� 如下：

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

原文 http://www.himigame.com/react-native/2222.html

正文到此结束

所属分类：编程技术

本文标签： 实例 HTML CTO 代码 CSS 2015 UI 生命 http struct src
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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

一：函数绑定

函数绑定：函数进行 bind（绑定）可以确保在函数中的 this 作为组件实例的引用,也就是说你想在自定义的函数中使用this，那么请先进行将此函数bind(this)

那么常用的函数绑定方式有如下几种：

1. 在生命周期函数中绑定，如下：

2. 使用的地方直接绑定，如下：

3. 直接在使用的地方直接lambda，更方便 �� 如下：

一：FlexBox 布局

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流

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

一：函数绑定

函数绑定： 函数进行 bind（绑定） 可以确保在函数中的 this 作为组件实例的引用,也就是说你想在自定义的函数中使用this，那么请先进行将此函数bind(this)

那么常用的函数绑定方式有如下几种：

1. 在生命周期函数中绑定，如下：

2. 使用的地方直接绑定，如下：

3. 直接在使用的地方直接lambda，更方便 �� 如下：

一：FlexBox 布局

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流

函数绑定：函数进行 bind（绑定）可以确保在函数中的 this 作为组件实例的引用,也就是说你想在自定义的函数中使用this，那么请先进行将此函数bind(this)