《React-Native系列》15、 RN之可触摸组件

    xiaoxiao2025-05-31  18

    今天,我们来看下ReactNative提供的可触摸组件。

    分别为:TouchableHighlight、TouchableNativeFeedback、TouchableOpacity、TouchableWithoutFeedback。

    TouchableWithoutFeedback控件是触摸点击不带反馈效果的,另外三个都是有反馈效果。这三个组件都继承了所有TouchableWithoutFeedback的属性。

    1、TouchableWithoutFeedback

    官网解释:

    除非你有一个很好的理由,否则不要用这个组件。所有能够响应触屏操作的元素在触屏后都应该有一个视觉上的反馈(然而本组件没有任何视觉反馈)。这也是为什么一个"web"应用总是显得不够"原生"的主要原因之一。

    注意:TouchableWithoutFeedback只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们。

    属性 accessible bool  delayLongPress number  单位是毫秒,从onPressIn开始,到onLongPress被调用的延迟。 delayPressIn number  单位是毫秒,从触摸操作开始到onPressIn被调用的延迟。 delayPressOut number  单位是毫秒,从触摸操作结束开始到onPressOut被调用的延迟。 disabled bool  如果设为true,则禁止此组件的一切交互。 hitSlop {top: number, left: number, bottom: number, right: number}  这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset(见下文)变得更大。 注意:触摸范围不会超过父视图的边界,也不会影响原先和本组件层叠的视图(保留原先的触摸优先级)。 onLayout function  当加载或者布局改变的时候被调用,参数为:{nativeEvent: {layout: {x, y, width, height}}} onLongPress function  onPress function  当触摸操作结束时调用,但如果被取消了则不调用(譬如响应者被一个滚动操作取代) onPressIn function 

    onPressOut function  pressRetentionOffset {top: number, left: number, bottom: number, right: number}  在当前视图不能滚动的前提下指定这个属性,可以决定当手指移开多远距离之后,会不再激活按钮。但如果手指再次移回范围内,按钮会被再次激活。只要视图不能滚动,你可以来回多次这样的操作。确保你传入一个常量来减少内存分配。

    <TouchableWithoutFeedback onPress={()=>{console.log('I am onPressed!')})> <View style={styles.xxx}> </View> <TouchableWithoutFeedback/> 除非说有特殊的场景需求,尽量还是不要用这个组件。

    2、TouchableHighlight

    官网的解释:

    本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。

    注意:TouchableHighlight只支持一个子节点,如果你希望包含多个子组件,用一个View来包装它们。

    属性 TouchableWithoutFeedback props...  译注:这意味着本组件继承了所有TouchableWithoutFeedback的属性。 activeOpacity number  指定封装的视图在被触摸操作激活时以多少不透明度显示(通常在0到1之间)。 onHideUnderlay function  当底层的颜色被隐藏的时候调用。 onShowUnderlay function  当底层的颜色被显示的时候调用。 style View#style  underlayColor string  有触摸操作时显示出来的底层的颜色。

    示例:

    <TouchableHighlight underlayColor='#f0f0f0' onPress={this.openIM.bind(this)} style={styles.userIMImageView}> <Image source={{uri:'im'}} style={styles.userIMImage}/> </TouchableHighlight>这个很简单的例子,就是一个图片,点击后背景色变为:# f0f0f0

    3、TouchableOpacity

    官网解释:

    本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低。这个过程并不会真正改变视图层级,大部分情况下很容易添加到应用中而不会带来一些奇怪的副作用。(译注:此组件与TouchableHighlight的区别在于并没有额外的颜色变化,更适于一般场景)。

    属性 TouchableWithoutFeedback props...  译注:这意味着本组件继承了所有TouchableWithoutFeedback的属性。 activeOpacity number  指定封装的视图在被触摸操作激活时以多少不透明度显示(通常在0到1之间)。

    示例:

    <TouchableOpacity style={styles.saveView} onPress={this.refuse.bind(this)} activeOpacity={0.7} > <Text style={styles.saveText}> 拒单 </Text> </TouchableOpacity>上面这边代码实现的效果是:按钮点击后,不透明度为0.7

    1、将TouchableOpacity组件当成一个View组件,子组件为Text,封装成一个Button 2、当按钮被点击时,不透明度activeOpacity设置为0.7

    需要注意的是TouchableHighlight和TouchableHighlight只有设置onPress方法后,对应的背景色和透明度才有效。

    4、TouchableNativeFeedback

    官网解释:

    本组件用于封装视图,使其可以正确响应触摸操作(仅限Android平台)。在Android设备上,这个组件利用原生状态来渲染触摸的反馈。目前它只支持一个单独的View实例作为子节点。在底层实现上,实际会创建一个新的RCTView结点替换当前的子View,并附带一些额外的属性。 原生触摸操作反馈的背景可以使用background属性来自定义。

    由于不支持跨平台,建议先不要使用这个组件。这里就先不说了。

    参考:http://reactnative.cn/docs/0.31/touchablewithoutfeedback.html#content

    转载请注明原文地址: https://ju.6miu.com/read-1299437.html
    最新回复(0)