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

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

 

当我们点击第一个图片时会报错,运行效果如下:(点击查看动态图)

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

错误是说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,更方便  如下:

JavaScript

1

2

3

4

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

 









本文转自 xiaominghimi 51CTO博客,原文链接:http://blog.51cto.com/xiaominghimi/1773137,如需转载请自行联系原作者
上一篇:Python_DDT数据驱动


下一篇:ART-PI之UDP非阻塞客户端