【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例

   <p>在上一篇 <a href="http://www.open-open.com/lib/view/open1464179157919.html" rel="nofollow,noindex">【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解</a> 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件。</p>    <p>那么紧接着我们利用Touchable来包装一个带图片的Button组件，且设计成可接受很多自定义参数。</p>    <p>一：创建我们自定义的Button，起名为MyButton, 且触摸后的底色、触发事件响应的函数、图片资源、以及图片大小都是根据传过来的值确定的。</p>    <p>1.首先我们开始引入必要的一些组件</p>    <pre>  importReact, {    AppRegistry,    Component,    Image,    TouchableHighlight,  } from 'react-native';  </pre>    <p>2. 创建我们的MyButton组件，继承 Component。</p>    <pre>  class MyButton extends Component {   render() {   return (   <TouchableHighlight                          underlayColor={this.props.bgColor}                          activeOpacity={0.5}                         onPress={this.props.onPress}                    >           <Image                                   source={require('./res/himi.png')}    style={ {                                          width: this.props.imgWidth,                                          height: this.props.imgHeight                                  }}                             />                   </TouchableHighlight>    )   }  }  </pre>    <p>这里需要注意的就一个  this.props:</p>    <p>在React中，组件的属性可以在组件类的 this.props 对象上获取。也就是说我们可以通过this.props对象上得到创建时传过来的属性。（注意属性名字要保持一致，才能正确获取到）</p>    <p>需要注意的：this.props.children 的值有三种可能：</p>    <p>a.如果当前组件没有子节点，它就是 undefined ;</p>    <p>b.如果有一个子节点，数据类型是 object ；</p>    <p>c.如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。</p>    <p>3. 将我们写好的组件导入module中。</p>    <pre>  module.exports = MyButton;  </pre>    <p>二：使用自定义的MyButton  </p>    <p>1. 导入我们的MyButton组件：</p>    <pre>  importMyButtonfrom './MyButton'  </pre>    <p>import X from ‘ Y ‘</p>    <p>X: 任意名字，用来代表我们导入的组件在此的临时组件名（可以与原组件名一致）</p>    <p>Y: 组件所在的相对路径</p>    <p>2.  在Render中使用：</p>    <pre>  <MyButton                bgColor='#000'              onPress ={()=>{Alert.alert('Himi', ' MyBtton IS Click! ');}}              imgWidth={100}              imgHeight={100}              >    </MyButton>  </pre>    <p>bgColor: 传给MyButton的按下后的底色</p>    <p>onPress: 传给MyButton的触发函数（这里Himi偷懒用了lambda表达式）</p>    <p>imgWidth:传给MyButton中所用图片的宽</p>    <p>imgHeight:传给MyButton中所用图片的高</p>    <p>运行效果如下：（点击查看动态图）</p>    <p><img src="https://simg.open-open.com/show/1343a21b4be8bb1446dbacafbd100355.gif"></p>    <p> </p>    <p>来自： <a href="/misc/goto?guid=4959673713592893478" rel="nofollow">http://www.himigame.com/react-native/2219.html</a></p>    <p> </p>