首页 > 其他 > 详细

Touchable类组件

时间:2017-12-05 00:15:06      阅读:268      评论:0      收藏:0      [点我收藏+]
Touchable
/*
* React Native中提供3个组件用于给其他没有触摸事件的组件,绑定触摸事件
* TouchableOpacity 透明触摸,点击时,组件会出现透明过渡的效果
* TouchableHighlight 高亮触摸,点击时,组件会出现高亮效果
* TouchableWithoutFeedback 无反馈触摸,点击时,组件无视觉变化
*
* 需要导入组件
*
*
* */

var LessionTouchable = React.createClass({

/* 绑定事件 onPress*/
clickBtn:function () {
alert("点击搜索按钮")
},

render:function () {
return(
<View sytle={styles.container}>
<View style={styles.flex}>
<View style={styles.input}>
</View>
</View>
<TouchableOpacity style={styles.btn}>
<Text style={styles.search} onPress={this.clickBtn}>搜索</Text>
</TouchableOpacity>
</View>
);
}
});

var styles = StyleSheet.create({
container:{
flexDirection:"row",
height:45,
marginTop:25
},
flex:{
flex:1
},
input:{
height:45,
borderWidth:1,
borderColor:"#CCC",
borderRadius:4,
marginLeft:5,
padding:5,
},
btn:{
width:55,
marginLeft:5,
marginRight:5,
backgroundColor:"blue",
height:45,
justifyContent:"center",
alignItems:"center"
},
search:{
color:"#FFF"
}
});

Touchable类组件

原文:http://www.cnblogs.com/daxueshan/p/7979604.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!