本站文章均为
李华明Himi 原创,转载务必在明显处注明：
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2222.html
转载自【黑米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
扫描二维码关注公众号，回复：
3860733 查看本文章
当我们点击第一个图片时会报错，运行效果如下：（点击查看动态图）
错误是说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，更方便