【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例-阿里云开发者社区

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

2016-05-16 3117

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介：

本站文章均为李华明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。

 
         1
        
         2
        
         3
        
         4
        
         5
        
         6
        
         7
        
         8
        
         9
        
         10
        
         11
        
         12
        
         13
        
         14
        
         15
        
         16
        
         17
        
         18
        
         19
        
         20
        
         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
         >
           
         ) 
        
         } 
        
         }

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

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

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

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

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

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

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

二：使用自定义的MyButton

1. 导入我们的MyButton组件：

 
         1
        
         import 
         MyButton 
         from
          
         './MyButton'

import X from ‘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
         =
         {
         100
         } 
        
         >
            
         <
         /
         MyButton
         >

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

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

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

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

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

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

热门文章

最新文章

相关课程

相关电子书

相关实验场景