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

Posted 2022-05-28 李华明Himi

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

width="150" height="210" frameborder="0" scrolling="no" src="http://widget.weibo.com/relationship/bulkfollow.php?language=zh_cn&uids=1916000601&wide=1&color=FFFFFF,FFFFFF,0082CB,666666&showtitle=0&showinfo=1&sense=0&verified=1&count=1&refer=http%3A%2F%2Fwww.himigame.com%2Freact-native%2F2219.html&dpc=1" style="margin: 0px; padding: 0px; border-width: 0px; font-family: inherit;font-size:undefined; font-style: inherit; font-variant-caps: inherit; line-height: inherit; max-width: 100%;">

在上一篇  【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中。

1	module . exports = MyButton ;

 

二：使用自定义的MyButton  

1. 导入我们的MyButton组件：

 

1	import MyButton from './MyButton'

import X from ‘Y‘

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

Y: 组件所在的相对路径

 

2.  在Render中使用：

1 2 3 4 5 6 7

< MyButton   REACT NATIVE 系列教程之九REACT NATIVE版本升级步骤与注意事项！ 基于CocoaPods的 React Native新手入门 REACT NATIVE 系列教程之三函数绑定与FLEXBOX是用好REACT的基础 REACT NATIVE 系列教程之十二REACT NATIVE(JS/ES)与IOS(OBJECT-C)交互通信 REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR) REACT NATIVE 系列教程之十一插件的安装使用与更新(示例:REACT-NATIVE-TAB-NAVIGATOR)