【REACT NATIVE 系列教程之二】创建自定义组件&&导入与使用示例
2016-05-11 21:37
896 查看
本站文章均为 李华明Himi 原创,转载务必在明显处注明:
转载自【黑米GameDev街区】 原文链接: http://www.himigame.com/react-native/2219.html
在上一篇 【REACT NATIVE 系列教程之一】触摸事件的两种形式与四种TOUCHABLE组件详解 中的最后介绍了如何使用Touchable的四种组件进行监听触摸事件。 那么紧接着我们利用Touchable来包装一个带图片的Button组件,且设计成可接受很多自定义参数。一:创建我们自定义的Button,先创建一个js文件起名为MyButton, 且触摸后的底色、触发事件响应的函数、图片资源、以及图片大小都是根据传过来的值确定的。1.首先我们开始引入必要的一些组件
2. 创建我们的MyButton组件,继承 Component。
这里需要注意的就一个 this.props: 在React中,组件的属性可以在组件类的 this.props 对象上获取。也就是说我们可以通过this.props对象上得到创建时传过来的属性。(注意属性名字要保持一致,才能正确获取到)需要注意的:this.props.children 的值有三种可能:a.如果当前组件没有子节点,它就是 undefined ;b.如果有一个子节点,数据类型是 object ;c.如果有多个子节点,数据类型就是 array 。所以,处理 this.props.children 的时候要小心。3. 将我们写好的组件导入module中。
二:使用自定义的MyButton 1. 导入我们的MyButton组件:
import X from ‘Y‘X: 任意名字,用来代表我们导入的组件在此的临时组件名(可以与原组件名一致)Y: 组件所在的相对路径 2. 在Render中使用:
bgColor: 传给MyButton的按下后的底色onPress: 传给MyButton的触发函数(这里Himi偷懒用了lambda表达式)imgWidth:传给MyButton中所用图片的宽imgHeight:传给MyButton中所用图片的高 运行效果如下:(点击查看动态图)
转载自【黑米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'; |
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> ) } } |
1 | module.exports = MyButton; |
1 | import MyButton from './MyButton' |
1 2 3 4 5 6 7 | <MyButton bgColor='#000' onPress ={()=>{Alert.alert('Himi', ' MyBtton IS Click! ');}} imgWidth={100} imgHeight={100} > </MyButton> |
相关文章推荐
- 详解HDFS Short Circuit Local Reads
- 三种禁用FileSystemObject组件的方法
- 用vbs列出机器上所有能调用的组件
- C#实现自定义双击事件
- WinForm实现自定义右下角提示效果的方法
- SQL Server Native Client下载 SQL Server Native Client安装方法
- MFC自定义消息的实现方法
- C#实现ProperTyGrid自定义属性的方法
- php自定义错误处理用法实例
- ThinkPHP中自定义目录结构的设置方法
- 剖析ASP.NET MVC的DependencyResolver组件
- asp水印组件之AspJpeg的结合代码实例
- Node.js编写组件的三种实现方式
- C#自定义事件监听实现方法
- C#自定义事件及用法实例
- C#自定义签名章实现方法
- Bootstrap表单组件教程详解
- JS上传组件FileUpload自定义模板的使用方法
- 适用于WebForm Mvc的Pager分页组件C#实现
- C#中使用IFormattable实现自定义格式化字符串输出示例