美文网首页
RN中的按钮

RN中的按钮

作者: 基本密码宋 | 来源:发表于2017-09-24 20:05 被阅读1094次

Touchable系列组件

为了能让视图能够响应用的的点击事件,我们需要借助Touchablexxx组件,来包裹我们的视图。
下面是四个Touchable系列的组件 一一举例

  • TouchableWithoutFeedback:响应用户的点击事件,如果你想在处理点击事件的同时不显示任何视觉反馈,使用它是个不错的选择。
  • TouchableHighlight:在TouchableWithoutFeedback的基础上添加了当按下时背景会变暗的效果。
  • TouchableOpacity:相比TouchableHighlight在按下去会使背景变暗的效果,TouchableOpacity会在用户手指按下时降低按钮的透明度,而不会改变背景的颜色。
  • TouchableNativeFeedback:在Android上还可以使用TouchableNativeFeedback,它会在用户手指按下时形成类似水波纹的视觉效果。注意,此组件只支持Android。
TouchableWithoutFeedback

TouchableWithoutFeedback一个Touchable系列组件中最基本的一个组价,只响应用户的点击事件不会做任何UI上的改变,在使用的过程中需要特别留意。

提示:无论是TouchableWithoutFeedback还是其他三种Touchable组件,都是在根节点都是只支持一个组件,如果你需要多个组件同时相应单击事件,可以用一个View将它们包裹着,它的这种根节点只支持一个组件的特性和ScrollView很类似。也就是TouchableWithoutFeedback之下必须只含有一个子View

export default class TouchableWithoutFeedbackTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0
        }
    }


    render() {
        return(
            <View>
        <TouchableWithoutFeedback
            onPress={()=> {
                this.setState({count: this.state.count+1})
            }}
            onLongPress={()=>{
                Alert.alert('提示','确定要删除吗?',[
                    {text:'取消',onPress:()=>{}, style:'cancel'},
                    {text:'确定',onPress:()=>{}, style:''}
                ])


            }}
            delayLongPress={5000}>  
            <View style={styles.button}>
                <Text style={styles.buttonText}>
                    我是TouchableWithoutFeedback,单击我
                </Text>
            </View>
        </TouchableWithoutFeedback>
        <Text style={styles.text}>您单击了:{this.state.count}次</Text>
            </View>
    )
    }
}
const styles = StyleSheet.create({
    button:{
        borderWidth:1,
    },
    buttonText:{
        fontSize:18
    },
    text:{
        fontSize:25
    }
});

里面是空间的点击事件和长按事件
里面最常用的几个属性

  • onPress(); 点击的时候
  • onLongPress();长按的时候
  • delayLongPress();长按的时间间隔
  • disabled true-禁止再次点击 false-可以点击 这个属性可以达到禁用按钮的效果
  • onPressIn()在开始点击的时候触发的事件
  • onPressOut() 在结束点击的时候触发的事件
  • delayPressIn() 从用户点击按钮到onPressIn 被回调的延时
  • delayPressOut() 从用户点击按钮后到onPressOut()的延时时间
    下面是 disabled的事例
export default class DisabledText extends Component {

    constructor(props){
        super();
        this.state={
            press:false,
            text:'啥也没有'
        }
    }


    render() {
        return (
            <View>
                <TouchableWithoutFeedback
                    onPress={()=>{
                        this.setState({
                            press:true,
                            text:'正在登陆....'
                        })
                         setTimeout(()=>{
                            this.setState({
                                press:false,
                                text:'暂时不能登录....'
                            })
                        },2000)
                    }}
                    disabled={this.state.press}
                >
                    <View>
                        <Text>
                            点几发动机阿卡丽附近
                        </Text>
                    </View>
                </TouchableWithoutFeedback>
                <Text>
                    {this.state.text}
                </Text>
            </View>
        )
    }
}

TouchableHighlight的使用

TouchableHighlight 是Touchable系列组件中比较常用的一个,它是在TouchableWithoutFeedback 的基础上添加了一些UI上的扩展,既当手指按下的时候,该视图的不透明度会降低,同时会看到相应的颜色(视图变暗或者变亮),从TouchableHighlight 的源码中我们可以看出,其实这个颜色就是在TouchableHighlight 的最外层个添加了一个View,通过改变这个View的背景色及透明度来达到这一效果。

  • activeOpacity
    我们可以通过activeOpacity来设置TouchableHighlight 被按下时的不透明度,从TouchableHighlight 的源码中可以看出,它的默认不透明度为0.85,我们可以根据需要进行调节。
  • underlayColor 按下去的颜色 默认状态下为balck黑色。
import React, { Component } from 'react';

import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
    Alert,
    TouchableHighlight
} from 'react-native';

export default class TouchableHighlightTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0
        }
    }


    render() {
        return(
            <View>
                <TouchableHighlight
                    activeOpacity={0.5}
                    underlayColor='green'
                    onHideUnderlay={()=>{
                        this.setState({text:'衬底被隐藏'})
                    }}
                    onShowUnderlay={()=>{
                        this.setState({text:'衬底显示'})
                    }}
                    onPress={()=>{

                    }}
                >
                    <View  >
                        <Text  >
                            TouchableHighlight
                        </Text>
                    </View>
                </TouchableHighlight>
                <Text>{this.state.text}</Text>
            </View>
        )
    }
}
TouchableOpacity的使用

TouchableOpacity也是Touchable系列组件中比较常用的一个,它是在TouchableWithoutFeedback的基础上添加了一些UI上的扩展,但这些扩展相比TouchableHighlight 少了一个额外的颜色变化。它是通过在按下去改变视图的不透明度来表示按钮被点击的。

在扩展属性方面TouchableOpacity相比TouchableHighlight,就少了很多,只有一个activeOpacity,来设置按下去的透明度。

export default class TouchableOpacityTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0,
            text:'d'
        }
    }


    render() {
        return(
            <View>
                <TouchableOpacity
                    activeOpacity={0.5}

                    onPress={()=>{
                        this.setState({
                            text:'点击了'
                        })
                    }}>
                    <View>
                        <Text>
                            TouchableHighlight
                        </Text>
                    </View>
                </TouchableOpacity>
                <Text>{this.state.text}</Text>
            </View>
        )
    }
}
TouchableNativeFeedback

为了支持Android5.0新增的触控反馈,React Native加入了TouchableNativeFeedback 组件,TouchableNativeFeedback 在TouchableWithoutFeedback 所支持的属性的基础上增加了按下去的水波纹效果。我们可以通过background 属性来自定义原生触摸操作反馈的背景。(只支持android)

里面有个属性 是 background
决定在触摸反馈的时候显示什么类型的背景。它接受一个有着type属性和一些基于type属性的额外数据的对象。推荐使用以下的静态方法之一来创建这个对象:

    1. TouchableNativeFeedback.SelectableBackground() - 会创建一个对象,表示安卓主题默认的对于被选中对象的背景。(?android:attr/selectableItemBackground)
    1. TouchableNativeFeedback.SelectableBackgroundBorderless() - 会创建一个对象,表示安卓主题默认的对于被选中的无边框对象的背景。(?android:attr/selectableItemBackgroundBorderless)。只在Android API level 21+适用。
    1. TouchableNativeFeedback.Ripple(color, borderless) - 会创建一个对象,当按钮被按下时产生一个涟漪状的背景,你可以通过color参数来指定颜色,如果参数borderless是true,那么涟漪还会渲染到视图的范围之外。(参见原生的actionbar buttons作为该效果的一个例子)。这个背景类型只在Android API level 21+适用也就是Android5.0或以上设备。
export default class TouchableNativeFeedbackTest extends Component {

    constructor(props){
        super();
        this.state={
            count:0,
            text:'d'
        }
    }


    render() {
        return(
            <View>
                <TouchableNativeFeedback

                    background={TouchableNativeFeedback.SelectableBackgroundBorderless()}>

                    onPress={()=>{
                        this.setState({
                            text:'点击了'
                        })
                    }}>
                    <View>
                        <Text>
                            TouchableHighlig
                        </Text>
                    </View>
                </TouchableNativeFeedback>
                <Text>{this.state.text}</Text>
            </View>
        )
    }
}

参考地址 传送门

相关文章

  • RN中的按钮

    Touchable系列组件 为了能让视图能够响应用的的点击事件,我们需要借助Touchablexxx组件,来包裹我...

  • RN白屏优化之Android篇

    在android中,当点击某个rn模块的入口按钮,弹出rn的activity到rn的页面展现出来的过程中,会有很明...

  • React Native SetState导致按钮点击失效

    情景:调用安卓原生,使用广播方式给RN发消息,向数组中插入数据,渲染RN页面,导致点击按钮事件,需要等到渲染基本结...

  • ReactNative之自定义高亮按钮

    ReactNative之自定义高亮按钮 在RN开发中,自带的按钮组件非常不好用,没有高亮状态,更加不可以自定义样式...

  • RN渐变按钮

    react-native渐变效果,渐变背景组件封装 组件文件 使用(自己修改一下导入路径)

  • RN按钮点击的处理流程(一)

    在RN的性能监控中,有一个比较复杂的问题,是如何去计算一个按钮的点击响应时长。我们知道,RN所有的UI控件都是在N...

  • #13 如何goBack的时候设置参数

    从A页面跳转到B页面,点击B页面返回按钮,把B页面中的参数传递到A页面中 RN群中的光强: 和这个issue 异曲...

  • React-Native 自定义按钮系列

    RN提供了好几种按钮,这里介绍最为常用的三种 1:第一种按钮最原始的Button 常用属性: title:按钮显示...

  • RN-可拖动的悬浮按钮

    RN-可拖动的悬浮按钮 需求 分享悬浮按钮,需要展示在特定页面,并且支持拖动(防止遮挡页面内容) 解决方案思路 1...

  • RN - 从RN传值至iOS原生

    一.导入工具类 .h文件代码如下: .m文件代码如下: 二.RN代码 跳转按钮事件:传值至原生(方法名需与工具类中...

网友评论

      本文标题:RN中的按钮

      本文链接:https://www.haomeiwen.com/subject/tuskextx.html