本文主要是介绍【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
标签： Reactnativehimiflexboxflex
2016-05-13 17:38 1389人阅读 收藏 举报
本站文章均为 李华明Himi 原创,转载务必在明显处注明：
转载自【黑米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. 在生命周期函数中绑定，如下：
| | this . testFun1 = this . testFun1 . bind ( this ) |
2. 使用的地方直接绑定，如下：
| | onPress = { this . testFun1 . bind ( this ) } |
3. 直接在使用的地方直接lambda，更方便
这篇关于【REACT NATIVE 系列教程之三】函数绑定与FLEXBOX是用好REACT的基础的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
