| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
ShaXpr
9年前发布

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

   <p>Himi在写React 时主要遇到两个知识点觉得很有必要跟大家一起回顾下。</p>    <ol>     <li>函数绑定</li>     <li>FlexBox 布局</li>    </ol>    <h2>一:函数绑定</h2>    <p>首先来看一段代码片段:</p>    <pre>  <code class="language-javascript"> 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 ');    }  </code></pre>    <p>在state中声明了myName</p>    <p>constructor: 组件的构造函数</p>    <p>componentWillMount : 组件预加载前调用的生命周期函数</p>    <p>testFun1、 testFun2 :是两个自定义的函数。</p>    <p>继续看render中的一段:</p>    <pre>  <code class="language-javascript"><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>  </code></pre>    <p>这里创建了两个图片组件且都添加了触摸组件,分别绑定自定义的函数testFun1 与 testFun2</p>    <p>当我们点击第一个图片时会报错,运行效果如下: <strong>(点击查看动态图)</strong></p>    <p><img src="https://simg.open-open.com/show/bec3254a8cd249688357781589cad613.gif"> <img src="https://simg.open-open.com/show/974222764ec5b1a006153cc2402d8b6f.png"></p>    <p>错误是说this没有undefined,原因是因为当想在自定义的函数中使用this,那么需要进行函数绑定。</p>    <p>函数绑定: 函数进行 bind(绑定) 可以确保在函数中的 this 作为组件实例的引用,也就是说你想在自定义的函数中使用this,那么请先进行将此函数bind(this)</p>    <p>那么细心的童鞋会发现!为什么在 componentWillMount 函数中也使用了this却通过了?因为 componentWillMount 是组件的生命周期函数 。</p>    <p>那么常用的函数绑定方式有如下几种:</p>    <p>1.  在生命周期函数中绑定,如下:</p>    <pre>  <code class="language-javascript">this.testFun1 = this.testFun1.bind(this)  </code></pre>    <p>2. 使用的地方直接绑定,如下:</p>    <pre>  <code class="language-javascript">onPress={this.testFun1.bind(this)}  </code></pre>    <p>3. 直接在使用的地方直接lambda,更方便 ��  如下:</p>    <pre>  <code class="language-javascript">onPress={()=>{      this.state.myName='tf1';      Alert.alert('Himi', ' testFun1 ');  }}  </code></pre>    <p>一:FlexBox 布局</p>    <p>关于CSS 的FlexBox 本篇不重新赘述了,一来是因为网上一搜一大把的教程,二来不一定有别人写的仔细 – -… 。但是,Himi这里推荐两个链接,学习足以:</p>    <p>1. 详细介绍与分析:   <a href="/misc/goto?guid=4959673715933842653" rel="nofollow,noindex">http://www.tuicool.com/articles/vQn6ZrU</a></p>    <p>2. 直观的教程: <a href="/misc/goto?guid=4959666808811786563" rel="nofollow,noindex">http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool</a></p>    <p> </p>    <p>来自: <a href="/misc/goto?guid=4959673716062692383" rel="nofollow">http://www.himigame.com/react-native/2222.html</a></p>    <p> </p>    
 本文由用户 ShaXpr 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1464179347119.html
ReactNative 移动开发 React Native flexbox