前言
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