Touchable类组件

Posted 2020-10-16 Da雪山

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