转载请注明出处:王亟亟的大牛之路

最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(wow你懂的),导致好多天没发问了,其实这部分知识月头就想写了,一直没补。

话不多说先安利:https://github.com/ddwhan0123/Useful-Open-Source-Android (下拉刷新模块单独区分开了)


rn也有类似于安卓的onClick行为

点击事件 onPress

长按事件 onLongPress

以及 “按下“ onPressIn “松开“ onPressOut

触控相关的组件分别为

TouchableHighlight

TouchableNativeFeedback

TouchableOpacity

TouchableWithoutFeedback

让我们用一个例子 来试验下这些内容

源码地址:https://github.com/ddwhan0123/ReactNativeDemo


import React, {Component, Navigator} from 'react';
import {
    AppRegistry,
    View,
    StyleSheet,
    Text,
    BackAndroid,
    Platform,
    ToastAndroid,
    TouchableHighlight,
    TouchableNativeFeedback,
    TouchableWithoutFeedback,
} from 'react-native';
var titleStr;
var _navigator;
var name;
//返回键监听行为
BackAndroid.addEventListener('hardwareBackPress', function() {
    if (_navigator == null) {
        return false;
    }
    if (_navigator.getCurrentRoutes().length === 1) {
        return false;
    }
        _navigator.pop();
    return true;
});

export default class Main extends Component {
    constructor(props) {
        super(props);
        _navigator = this.props.navigator;
        titleStr = this.props.titleStr;
        name = this.props.name;
    }

    //常规点击事件调用
    //常规的概念:手指在控件区域内按下,手指在控件区域内离开
    _textOnPress(){
      ToastAndroid.show('  这是一个可点击的Text', ToastAndroid.SHORT)
    }
    //手指在控件区域内按下,无论离不离开都立即调用
    _textOnPressIn(){
      ToastAndroid.show('  PressIn被触发', ToastAndroid.SHORT)
    }
    //手指在控件区域按下,无论在不在控件区域内离开都会被调用
    _textOnPressOut(){
      ToastAndroid.show('  OnPressOut被触发', ToastAndroid.SHORT)
    }
    //手指在控件区域内按下持续一定时间,手指在控件区域内离开(时间可自定义)
    _textOnLonePress(){
      ToastAndroid.show('这是一个长按波纹Text', ToastAndroid.SHORT)
    }
    //按下去没有ui反馈,但是回调已经触发
    _textNoFeedbackOnPress(){
        ToastAndroid.show('这是一个按下去没有实际效果的Text', ToastAndroid.SHORT)
    }

    render() {
        return (
            <View style={{flex : 1,flexDirection : 'column'}}>
                <Text>{titleStr}
                    页面 获得的参数: value = {name}
                </Text>
                <TouchableHighlight
                  onPress={this._textOnPress}
                  onPressIn={this._textOnPressIn}>
                  <Text style={{marginTop:20}}>
                      这是一个可点击的Text还响应了OnPressIn
                  </Text>
                </TouchableHighlight>
                {/* android md风格的动画效果,需要在外层套一个view不然,波纹扩散到哪去?  */}
                <TouchableNativeFeedback
                  onLongPress={this._textOnLonePress}
                  onPressOut={this._textOnPressOut}>
                  <View style={{width: 150, height: 28, backgroundColor: 'red',marginTop:20}}>
                    <Text>
                      这是一个长按波纹Text
                    </Text>
                  </View>
                </TouchableNativeFeedback>
                <TouchableWithoutFeedback
                  onPress={this._textNoFeedbackOnPress}>
                  <View style={{marginTop:20}}>
                    <Text >
                      这是一个没有点击效果的Text
                    </Text>
                  </View>
                </TouchableWithoutFeedback>
            </View>
        );
    }
}

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

TouchableWithoutFeedback这个组件只响应touch手势,不增加点击态

TouchableNativeFeedback这个组件只能用在安卓上,类似于Material Design的点击波纹效果

TouchableOpacity这个组件用来给为内部元素在点击时添加透明度

TouchableHighlight会给内部元素增加绑定事件之,还会在ui上显示点击区域的响应


什么?你要自定义?

下次再讲 进阶篇 关于 Gesture Responder System

混合开发的大趋势之一React Native手势行为那些事的更多相关文章

  1. 混合开发的大趋势之一React Native与Android联调

    转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...

  2. 混合开发的大趋势之一React Native之页面跳转

    转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...

  3. 混合开发的大趋势之一React Native之简单的登录界面

    转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...

  4. 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码

    转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...

  5. 混合开发的大趋势之一React Native之Image (脑动理解)

    文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...

  6. 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let

    转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...

  7. 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes

    转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...

  8. 移动开发发展方向-----Hybird混合开发3大方案

    移动开发发展方向-----Hybird混合开发3大方案

  9. 浅谈移动应用的跨平台开发工具(Xamarin和React Native)

    谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...

随机推荐

  1. HTML5跨平台开发环境配置

    http://hi.baidu.com/kuntakinte/item/1bbd3759b4901a3695eb050c

  2. jsp+servlet+mvc模式图

    在我们的开发中,最常用的开发模式莫过于MVC模式,即M--MODEL.V--View.C--Controller,这样不仅可以方便开发人员分工协作,提高开发效率,增强程序的可维护性和拓展性,而且利用C ...

  3. 使用 MySQL 管理层次结构的数据

    概述 我们知道,关系数据库的表更适合扁平的列表,而不是像 XML 那样可以直管的保存具有父子关系的层次结构数据. 首先定义一下我们讨论的层次结构,是这样的一组数据,每个条目只能有一个父条目,可以有零个 ...

  4. iOS 内存管理(转载)

     N久没维护这个博客了,从开始接触编程到现在已经三四年了.不太习惯写博客,这应该是个不好的习惯.所以从哪哪天开始,我得改变自己 (:       . 文采不太好,因此很多的文章都会借鉴他人的,但是我一 ...

  5. 基于HTTP协议的轻量级开源简单队列服务:HTTPSQS 笔记

    队列服务就是为了提高相应速度,把耗时或者不需要即时处理的流程放到异步处理过程中,HTTPSQS就是这样一个服务. 更详细的可以参考 http://blog.s135.com/httpsqs/,这里记录 ...

  6. pymsql与ORM--python操作MySQL之利器

    pymsql 原生模块 pymsql是python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 下载安装 pip3 install pymysql 使用操作 1.执行SQL impor ...

  7. 策略(strategy)模式

    Head First一书中对于策略(strategy)模式的正式定义是:策略模式定义了算法族,分别封装起来,让他们之间可以相互替换,此模式让算法的变化独立于使用算法的客户. 为了介绍这个算法,书中讲了 ...

  8. 【tensorflow】

    运行计算图 session.run() https://blog.csdn.net/sinat_39372048/article/details/80868168 赋值 tf.assign() tf. ...

  9. git学习------>如何修改git已提交的记录中的Author和Email?

    一.背景 最近搭建好GitLab后,准备陆陆续续的将之前在SVN仓库中保存的代码迁移到GitLab上,昨天顺利将三个Android组件的代码迁移到GitLab后,其他同事发现迁移是成功了,但是pull ...

  10. java.math.BigDecimal

    package day14; import java.math.BigDecimal; /** * Created by admin on 2018/11/24. * 看程序写结果:结果和我们想的有一 ...