zoukankan      html  css  js  c++  java
  • React Native之Touchable四组件

    一、TouchableHighlight

    概念:

    本组件用于封装视图,使其可以正确响应触摸操作。当按下的时候,封装的视图的不透明度会降低,同时会有一个底层的颜色透过而被用户看到,使得视图变暗或变亮。

    在底层实现上,实际会创建一个新的视图到视图层级中,如果使用的方法不正确,有时候会导致一些不希望出现的视觉效果。譬如没有给视图的backgroundColor显式声明一个不透明的颜色。

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

    renderButton: function() {
      return (
        <TouchableHighlight onPress={this._onPressButton}>
          <Image
            style={styles.button}
            source={require('./button.png')}
          />
        </TouchableHighlight>
      );
    },

    属性:继承了所有TouchableWithoutFeedback的属性。

    1. activeOpacity   Number    指定封装的视图在被触摸操作激活时以多少不透明度显示(通常在0到1之间)。
    2. onHideUnderlay     Function  当底层的颜色被隐藏的时候调用。

    3. onShowUnderlay    Function  当底层的颜色被显示的时候调用。

    4. style

    5. underlayColor    String   触摸操作时的底层颜色

    二、TouchableNativeFeedback

    概念:

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

    renderButton: function() {
      return (
        <TouchableNativeFeedback
            onPress={this._onPressButton}
            background={TouchableNativeFeedback.SelectableBackground()}>
          <View style={{ 150, height: 100, backgroundColor: 'red'}}>
            <Text style={{margin: 30}}>Button</Text>
          </View>
        </TouchableNativeFeedback>
      );
    },

    属性:继承了所有TouchableWithoutFeedback的属性。

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

    • TouchableNativeFeedback.SelectableBackground()  - 会创建一个对象,表示安卓主题默认的对于被选中对象的背景。  

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

    三、TouchableOpacity

    概念:

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

    renderButton: function() {
      return (
        <TouchableOpacity onPress={this._onPressButton}>
          <Image
            style={styles.button}
            source={require('image!myButton')}
          />
        </TouchableOpacity>
      );
    },

    属性:继承了所有TouchableWithoutFeedback的属性。

    1. activeOpacity   Number    指定封装的视图在被触摸操作激活时以多少不透明度显示(通常在0到1之间)

    四、TouchableWithoutFeedback

    概念:

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

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

    属性:

    1.  accessibilityComponentType
    2. accessibilityTraits

    3. accessible

    4. delayLongPress  单位是毫秒,从onPressIn开始,到onLongPress被调用的延迟。

    5. delayPressIn   单位是毫秒,从触摸操作开始到onPressIn被调用的延迟。

    6. delayPressOut  单位是毫秒,从触摸操作结束开始到onPressOut被调用的延迟。

    7. disabled    如果设为true,则禁止此组件的一切交互。

    8. hitSlop {top: number, left: number, bottom: number, right: number}  这一属性定义了按钮的外延范围。这一范围也会使pressRetentionOffset(见下文)变得更大。 注意:触摸范围不会超过父视图的边界,也不会影响原先和本组件层叠的视图(保留原先的触摸优先级)。

    9. onLayout   当加载或者布局改变的时候被调用,参数为:

      {nativeEvent: {layout: {x, y, width, height}}}

    10. onLongPress

    11. onPress   当触摸操作结束时调用,但如果被取消了则不调用(譬如响应者被一个滚动操作取代)

    12. onPressIn

    13. onPressOut

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

  • 相关阅读:
    [luoguP2221] [HAOI2012]高速公路(线段树)
    SICP:对数步数内迭代计算幂的函数
    python__tkinter之listbox&button
    C陷阱与缺陷 之 各种知识技巧
    ACM && Find Minimum in Rotated Sorted Array
    windows编程一些小知识
    Linux_C pthread 关于多线程一个简单的程序
    ACM&贪心算法
    Linux_C socket 数据报之client, server.c
    Linux_C socket 数据报之一些辅助函数
  • 原文地址:https://www.cnblogs.com/douglasvegas/p/7007969.html
Copyright © 2011-2022 走看看