npm 包 react-native-touch-able 使用教程

前言

react-native-touch-able 是一个 React Native 的组件库，是用于创建可触摸区域的组件。在 React Native 开发中，可触摸区域经常被使用，比如按钮、列表项等等。React-Native-Touch-able 可以帮助开发人员快速实现可触摸 UI 元素，帮助开发人员提升开发效率。

安装

使用 React-Native-Touch-able 需要先安装该库，使用 npm 安装方式如下：

npm install react-native-touch-able --save

使用说明

React-Native-Touch-able 有几个内置好的组件，使用的时候需要先进行引入，示例如下：

import { TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback } from 'react-native-touch-able';

接下来，我们看一下每个组件的使用。

TouchableHighlight

TouchableHighlight 可以在触摸时改变背景颜色，实现类似按钮点击后的高亮效果。

<TouchableHighlight onPress={() => handlePress()} underlayColor='grey'>
	<Text>TouchableHighlight</Text>
</TouchableHighlight>

在上面的代码中，onPress 属性是必须的，用于指定触摸后的回调函数。underlayColor 属性用于指定触摸时的背景颜色。

TouchableOpacity

TouchableOpacity 是一个高度可定制的可触摸组件。可以实现透明的、背景颜色可变的按钮等多种效果。

<TouchableOpacity onPress={() => handlePress()}>
	<Text>TouchableOpacity</Text>
</TouchableOpacity>

在上面的代码中，onPress 属性是必须的，用于指定触摸后的回调函数。

TouchableNativeFeedback

TouchableNativeFeedback 使用 Android 原生的 TouchableNativeFeedback 实现触摸效果，可以在 Android 平台上实现较好的触摸交互效果。

<TouchableNativeFeedback onPress={() => handlePress()}>
	<View style={{ width: 150, height: 100, backgroundColor: 'blue' }}>
		<Text style={{ margin: 30 }}>TouchableNativeFeedback</Text>
	</View>
</TouchableNativeFeedback>

在上面的代码中，onPress 属性是必须的，用于指定触摸后的回调函数。

TouchableWithoutFeedback

TouchableWithoutFeedback 不会有任何的可视化反馈，只是触发 onPress 回调函数。该组件经常被用于实现交互透明的触摸区域。

<TouchableWithoutFeedback onPress={() => handlePress()}>
	<Text>TouchableWithoutFeedback</Text>
</TouchableWithoutFeedback>

在上面的代码中，onPress 属性是必须的，用于指定触摸后的回调函数。

总结

React-Native-Touch-able 是一个方便开发人员快速创建可触摸 UI 元素的组件库。使用 TouchableHighlight 可以给按钮等组件添加一个高亮的触摸效果。TouchableOpacity 可以用于创建透明的按钮等组件。TouchableNativeFeedback 使用 Android 原生的 TouchableNativeFeedback 实现触摸效果，可以在 Android 平台上实现较好的触摸交互效果。最后，TouchableWithoutFeedback 不会有任何的可视化反馈，只是触发 onPress 回调函数。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566ac81e8991b448e2e68