介绍
在前端开发中，触摸高亮效果经常被使用到。不过在某些场景下，比如需要使用长按操作的时候，这种效果就显得有些不太友好了。nuke-touchable-highlight 这个 npm 包提供了一种更为灵活的处理方式。它可以通过组件属性来控制触摸高亮的行为，从而实现更加自由、个性化的交互效果。
在本文中，我们将会从如下几个部分详细介绍 nuke-touchable-highlight 的使用方法：
- 安装
- 基本使用
- 高级用法
- 示例代码
安装
通过 npm 安装 nuke-touchable-highlight：
npm install nuke-touchable-highlight --save
或者通过 yarn：
yarn add nuke-touchable-highlight
基本使用
引入 nuke-touchable-highlight：
import TouchableHighlight from 'nuke-touchable-highlight';
然后就可以像使用原生组件一样使用 TouchableHighlight 组件了。
TouchableHighlight 的基本用法和原生的 TouchableHighlight 组件非常相似。下面是一个使用示例：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ------------------ ---- ---------------------------
----- ------- ------- --------- -
-------- -
------ -
------
-------------------
----------- -- ------------------ ---------
-----------------------
-------------
-
------
----------- ---------
-------
---------------------
-------
--
-
-触摸时，TouchableHighlight 会变为 underlayColor 参数指定的颜色。useForeground 参数指定触摸高亮是否出现在组件前景。
高级用法
除了基本使用外， nuke-touchable-highlight 还支持一些高级用法。
修改默认颜色
默认情况下，TouchableHighlight 的触摸高亮颜色是 #6E7377。你可以通过修改默认样式文件来修改触摸高亮颜色：
import { StyleSheet } from 'react-native';
StyleSheet.create({
highlight: {
backgroundColor: 'red',
},
});手势事件
TouchableHighlight 组件支持一些手势事件：onPress、onPressIn、onPressOut、onLongPress。可以通过设置 onPress 参数来绑定 onPress 事件。
嵌套子级组件
如果你在子组件中嵌套了 TouchableHighlight 组件，那么触摸高亮只会在子组件的容器上出现。解决这个问题的办法是使用 TouchableHighlight 的 prop underlayColor。
组合使用 TouchableHighlight 及其子组件
对于一个包含 TouchableHighlight 的组合组件来说，触摸高亮被覆盖的问题同样适用。可以使用 setNativeProps 来手工触发触摸高亮。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ----- --------- - ---- ---------------
----- -------- ------- --------- -
------------------- -
----------------------------------------------- -- ------------------------------------------------------
-
------- - -- -- -
------------------ -- ---------------------
---------------------------------------
------ -
---------------- --------------------- -- ----------
--
---
---------------------------------------------------------------------
---------------------------------------
------ -
---------------- --------------
--
---
--
-------- -
------ -
-------------------
------------------------
----------------------
------------------------------------ -- ----------
---------------
-
---------------------
---------------------
--
-
-示例代码
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ----- ---- - ---- ---------------
------ ------------------ ---- ---------------------------
----- ------- ------- --------- -
-------- -
------ -
------
-------------------
----------- -- ------------------ ---------
-----------------------
-------------
-
------
----------- ---------
-------
---------------------
-------
--
-
-
------ ------- --------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055eb081e8991b448dc4cb