混合开发的大趋势之一React Native手势行为那些事
转载请注明出处:王亟亟的大牛之路
最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(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手势行为那些事的更多相关文章
- 混合开发的大趋势之一React Native与Android联调
转载请注明出处:王亟亟的大牛之路 先安利,有空我都会更,看到的好东西都会放进来:https://github.com/ddwhan0123/Useful-Open-Source-Android 公司某 ...
- 混合开发的大趋势之一React Native之页面跳转
转载请注明出处:王亟亟的大牛之路 最近事情有点多,没有长时间地连贯学习,文章也停了一个多礼拜,愧疚,有时间还是继续学习,继续写! 还是先安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native之简单的登录界面
转载请注明出处:王亟亟的大牛之路 这些天都在学习RN这部分吧,然后写了个简单的登陆业务,从"实战"中讲解吧 还是继续安利:https://github.com/ddwhan0123 ...
- 混合开发的大趋势之一React Native之页面跳转(2)+物理返回+特定平台代码
转载请注明出处:这里写链接内容 今天是10月份的最后一天,我加了3个月来的第一个班,挤出了这篇. 废话不多先安利,然后继续学习 RN 有好东西都往里面丢,努力做好归纳 https://github.c ...
- 混合开发的大趋势之一React Native之Image (脑动理解)
文章是宝宝自己写的,你可以转走,标明哪来的就行王亟亟的大牛之路 国庆这些天要么旅游要么WOW,感觉整个人都废了.. 直接从黄种人晒成了非洲大酋长..然而还是无橙,这礼拜要做7天,昨天把单元测试的东西整 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 块级作用域 和 let
转载请注明出处:王亟亟的大牛之路 最近都有事干然后,快到月底了这个月给CSDN的博文也就两篇,想想也蛮多天没更了,那就来一篇. 老规矩,先安利:https://github.com/ddwhan012 ...
- 混合开发的大趋势之 一个Android程序员眼中的 React.js 箭头函数,const, PropTypes
转载请注明出处:王亟亟的大牛之路 昨天写了篇React.js的开头之作,讲了讲块级作用域和let,先安利:https://github.com/ddwhan0123/Useful-Open-Sourc ...
- 移动开发发展方向-----Hybird混合开发3大方案
移动开发发展方向-----Hybird混合开发3大方案
- 浅谈移动应用的跨平台开发工具(Xamarin和React Native)
谈移动应用的跨平台开发不能不提HTML5,PhoneGap和Sencha等平台一直致力于使用HTML5技术来开发跨平台的移动应用,现在看来这个方向基本算是失败的,基于HTML5的移动应用在用户体验上与 ...
随机推荐
- webPage logService 日志服务 剥离
[旧的场景]1.x.a.com指向负载均衡服务器ipL;2.代码所在的应用服务器ipA,ipB,ipC,运行nginx-phpFPM服务,提供2个服务: 2.1.应用服务器ipA,ipB,ipC中we ...
- 小程序 修改按钮button样式:去边框、圆角及文字居左对齐、修改按钮高度
因为有要button和view显示的样式相同的需要 所以要去掉按钮的边框,圆角,背景色,文字需要居左对齐,代码如下: 关键是按钮的样式: 1. 去掉边框: .user-phone-btn::after ...
- Storm-源码分析- metric
首先定义一系列metric相关的interface, IMetric, IReducer, ICombiner (backtype.storm.metric.api) 在task中, 创建一系列bui ...
- golang函数学习笔记
golang函数特点: a.不支持重载,一个包不能有两个名字一样的函数 b.函数是一等公民,函数也是一种类型,一个函数可以赋值给变量 c.匿名函数 d.多返回值 例子1 func add(a, b ...
- django允许外部访问
默认方法启动django python manage.py runserver 这时启动的服务只能在本机访问,这是因为服务只向本机(127.0.0.1:8000)提供,所以局域网的其他机器不能访问. ...
- Python 开发中高级技巧
列表推导式 >>> chars = [ c for c in 'python' ] >>> chars ['p', 'y', 't', 'h', 'o', 'n'] ...
- 压力测试sysbench
sysbench是一个模块化的.跨平台.多线程基准测试工具,主要用于评估测试各种不同系统参数下的数据库负载情况.目前sysbench代码托管在launchpad上,项目地址:https://launc ...
- cpu与寄存器,内核态与用户态及如何切换
cpu:相当于计算机的大脑负责运算和发送命令: 寄存器:寄存器是cpu当中的一个有限存储部件,cpu从内存调用数据时,寄存器会将从内存调用的数据进行更新在寄存器中以一个字或变量进行存储. 寄存器总共分 ...
- C++ error C2064:
error C2064: term does not evaluate to a function 错误原因,非函数,当成函数使用了
- Bootstrap 中的插件的学习
一个静态的模态窗口实例,如下面的实例所示: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 模态 ...