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

本站文章均为  李华明Himi 原创,转载务必在明显处注明： 
转载自【黑米GameDev街区】 原文链接:  http://www.himigame.com/react-native/2222.html

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

1. 函数绑定
2. 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，更方便

顶

0

踩

0

 

 

• 上一篇【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
• 下一篇【REACT NATIVE 系列教程之四】刷新组件RENDER(重新渲染)的三种方式详解

我的同类文章

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

http://blog.csdn.net