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

发布时间：2020-12-15 03:33:25 所属栏目：百科来源：网络整理

导读：本站文章均为李华明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.首先我们开始引入必要的一些组件

import React, {

AppRegistryComponentImageTouchableHighlight} from 'react-native';

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

class MyButton extendsComponentrender() return(

<TouchableHighlight

underlayColor={this.propsbgColor

activeOpacity{0.5

onPressonPress><Imagesource{require('./res/himi.png')style{width:imgWidthheight.imgHeight

}/</TouchableHighlight)

}

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

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

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

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

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

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

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

1	moduleexports=MyButton;

二：使用自定义的MyButton

1. 导入我们的MyButton组件：

1	import MyButton from'./MyButton'

importXfrom ‘Y‘

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

Y: 组件所在的相对路径

2. 在Render中使用：

MyButton

bgColor='#000'

onPress{)=>{Alert.alert'Himi'' MyBtton IS Click! ';}

imgWidth100imgHeight

MyButton>

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

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

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

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

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

（编辑：李大同）

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

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

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