加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

React Native-9.React Native Touchable组件详解

发布时间:2020-12-15 04:40:26 所属栏目:百科 来源:网络整理
导读:Touchable系列组件简介 RN中没有web中给元素绑定click事件的机制,但是在上一节中我们知道Text组件中我们可以绑定 onPress 事件来触发点击事件,为了像Text组件那样使得其它组件可被点击,RN提供了3个组件来做这个事情: - TouchableOpacity: 透明触摸,点击

Touchable系列组件简介

RN中没有web中给元素绑定click事件的机制,但是在上一节中我们知道Text组件中我们可以绑定onPress事件来触发点击事件,为了像Text组件那样使得其它组件可被点击,RN提供了3个组件来做这个事情:
- TouchableOpacity: 透明触摸,点击时点击的组件会出现透明的偷渡效果。
- TouchableWithoutFeedback: 无反馈性触摸,用户点击时没有任何反应。
- TouchableHighLight: 高亮触摸,点击时点击的组件会出现高亮效果。

代码

'use strict';
var React = require('react-native');

var {
  AppRegistry,StyleSheet,Text,View,TouchableHighlight,TouchableOpacity,TouchableWithoutFeedback,} = React;

var styles = StyleSheet.create ({
    flex: {
        flex :1,marginTop:100,},item: {
        fontSize: 18,marginLeft: 5,color: '#434343',})

var wxsPrj = React.createClass({
  show: function(text) {
    alert(text);
  },render: function() {
    return (
        <View style = {[styles.flex]}>
            <View>
                <TouchableHighlight 
                    onPress= {this.show.bind(this,'TouchableHightlight 测试')}
                    underlayColor = '#f4d231'>
                    <Text style = {[styles.item]}>
                        TouchableHightlight 测试
                    </Text>
                </TouchableHighlight>
            </View>
            <View>
                <TouchableOpacity
                    onPress = {this.show.bind(this,'TouchableOpacity 测试')}>
                    <Text style = {[styles.item]}>TouchableOpacity 测试</Text>
                    </TouchableOpacity>
            </View>
            <View>
                <TouchableWithoutFeedback
                    onLongPress = {this.show.bind(this,'TouchableWithoutFeedback onLongPress')}>
                    <Text style = {[styles.item]}>
                        TouchableWithoutFeedback onLongPress
                    </Text>
                </TouchableWithoutFeedback>
            </View>
        </View>
        );
    }
})

AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

代码详解
- onPress : 点击时触发
- onLongPress : 长按时触发
- onPressIn : 触摸进入事件
- onPressOut : 触摸释放事件

TouchableHighLight组件中:
- activeOpacity: 触摸时透明度的设置
- onHideUnderlay : 隐藏背景阴影时触发的事件
- onShowUnderlay : 显示背景阴影时触发的事件
- underlayColor : 点击时背景阴影效果的颜色

详细效果,大家运行一下上边的代码即可

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读