混合开发的大趋势之一React Native手势行为那些事 (1)

前端之家收集整理的这篇文章主要介绍了混合开发的大趋势之一React Native手势行为那些事 (1)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

最近项目部分模块重构,事情有点多,学习进度有所延缓,外加一直在吸毒(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);
@H_502_135@

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

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

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

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


什么?你要自定义

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

猜你在找的React相关文章