Himi在写React 时主要遇到两个知识点觉得很有必要跟大家一起回顾下。
首先来看一段代码片段:
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
当我们点击第一个图片时会报错,运行效果如下: (点击查看动态图)
错误是说this没有undefined,原因是因为当想在自定义的函数中使用this,那么需要进行函数绑定。
那么细心的童鞋会发现!为什么在 componentWillMount 函数中也使用了this却通过了?因为 componentWillMount 是组件的生命周期函数 。
this.testFun1 = this.testFun1.bind(this)
onPress={this.testFun1.bind(this)}
onPress={()=>{ this.state.myName='tf1'; Alert.alert('Himi', ' testFun1 '); }}
关于CSS 的FlexBox 本篇不重新赘述了,一来是因为网上一搜一大把的教程,二来不一定有别人写的仔细 – -… 。但是,Himi这里推荐两个链接,学习足以:
1. 详细介绍与分析: http://www.tuicool.com/articles/vQn6ZrU
2. 直观的教程: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool