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

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

            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 系列教程之二】创建自定义组件&&导入与使用示例





本文转自 xiaominghimi 51CTO博客,原文链接:http://blog.51cto.com/xiaominghimi/1772389,如需转载请自行联系原作者

上一篇:Akka并发编程——第六节:Actor模型(五)


下一篇:Akka并发编程——第五节:Actor模型(四)