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"
}
});