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

发布时间：2020-12-15 05:18:58 所属栏目：百科来源：网络整理

导读：本站文章均为李华明Himi 原创,转载务必在明显处注明：转载自【黑米GameDev街区】原文链接: http://www.himigame.com/react-native/2219.html 在上一篇【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解中的最后介绍了如何使用Tou

本站文章均为李华明Himi 原创,转载务必在明显处注明：
转载自【黑米GameDev街区】原文链接: http://www.himigame.com/react-native/2219.html

在上一篇【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件。

那么紧接着我们利用Touchable来包装一个带图片的Button组件，且设计成可接受很多自定义参数。

一：创建我们自定义的Button，先创建一个js文件起名为MyButton,且触摸后的底色、触发事件响应的函数、图片资源、以及图片大小都是根据传过来的值确定的。

1.首先我们开始引入必要的一些组件

 
          1 
        
          2 
        
          3 
        
          4 
        
          5 
        
          6 
        
         import  
         React 
         , 
           
         { 
        
         AppRegistry 
          
         Component 
          
         Image 
          
         TouchableHighlight 
          
         } 
           
         from 
           
         'react-native' 
         ;

2. 创建我们的MyButton组件，继承 Component。

 
         class 
           
         MyButton 
           
         extends 
         Component 
         { 
        
render 
         ( 
         ) 
         { 
        
         return 
         ( 
        
         < 
         TouchableHighlight  
        
         underlayColor 
         = 
         { 
         this 
         . 
         props 
         bgColor 
          
         activeOpacity 
         { 
         0.5 
           
         onPress 
         onPress 
          
> 
          
< 
         Image 
           
         source 
         { 
         require 
         ( 
         './res/himi.png' 
         ) 
           
style 
         { 
         { 
        
         width 
         : 
         imgWidth 
         height 
         . 
         imgHeight 
        
         } 
           
         / 
           
         < 
         / 
         TouchableHighlight 
           
) 
        
         } 
        
}

这里需要注意的就一个 this.props:

在React中，组件的属性可以在组件类的 this.props 对象上获取。也就是说我们可以通过this.props对象上得到创建时传过来的属性。（注意属性名字要保持一致，才能正确获取到）

需要注意的：this.props.children 的值有三种可能：

a.如果当前组件没有子节点，它就是 undefined ;

b.如果有一个子节点，数据类型是 object ；

c.如果有多个子节点，数据类型就是 array 。所以，处理 this.props.children 的时候要小心。

3.将我们写好的组件导入module中。

          1 
        
 
         module 
         exports 
         = 
         MyButton 
         ; 
        

二：使用自定义的MyButton

1. 导入我们的MyButton组件：

          1 
        
 
         import  
         MyButton  
         from 
         './MyButton' 
        

importXfrom ‘Y‘

X: 任意名字，用来代表我们导入的组件在此的临时组件名（可以与原组件名一致）

Y: 组件所在的相对路径

2. 在Render中使用：

          1 
        
          2 
        
          3 
        
          4 
        
          5 
        
          6 
        
          7 
        
         MyButton  
        
         bgColor 
         = 
         '#000' 
        
         onPress 
         { 
         ) 
         = 
         > 
         { 
         Alert 
         . 
         alert 
         'Himi' 
         ' MyBtton IS Click! ' 
         ; 
         } 
        
imgWidth 
         100 
         } 
        
         imgHeight 
         } 
        
         MyButton 
         >

bgColor: 传给MyButton的按下后的底色

onPress: 传给MyButton的触发函数（这里Himi偷懒用了lambda表达式）

imgWidth:传给MyButton中所用图片的宽

imgHeight:传给MyButton中所用图片的高

运行效果如下：（点击查看动态图）

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

【REACT NATIVE 系列教程之二】创建自定义组件&amp;&amp;导入与

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