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

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

php中文网

发布： 2016-06-21 08:48:48

原创

1622人浏览过

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

硅基智能

基于Web3.0的元宇宙，去中心化的互联网，高质量、沉浸式元宇宙直播平台，用数字化重新定义直播

查看详情

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

错误是说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

大家都在看：

如何在电商网站后台在线编辑HTML模板的解决办法网页版手机HTML工具入口 HTML工具手机版在线试用如何编辑网页HTML中的网格系统_如何编辑网页HTML中使用Bootstrap网格系统的方法 HTML5网页如何制作登录页面 HTML5网页登录表单的设计指南如何在VS Code中安装HTML编辑器扩展的详细教程

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

一：函数绑定

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

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

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

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

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

一：FlexBox 布局

大家都在看：

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