可触摸的组件提供了捕获敲击功能的功能。如果可触摸组件不适合您的应用,则可以将其实现为基本按钮的替代方案。使用这些组件,您可以构建自己的按钮。轻触这些组件,即可显示反馈。
touchables组件不提供任何默认样式,因此您需要做一些样式才能在应用程序中很好地呈现。
React Native提供了四个可触摸的组件。
TouchableHighlight可以在您要在网络上使用按钮或链接的地方使用。按下该组件的背景将使其变暗。
Props | Type | Required | Platform | Description |
---|---|---|---|---|
activeOpacity | number | no | 透明度。 | |
onHideUnderlay | function | no | 是否隐藏底图。 | |
onShowUnderlay | function | no | 是否显示底图。 | |
style | View.style | no | ||
underlayColor | color | no | 底图颜色。 |
TouchableNativeFeedback使视图可以在触摸时正确响应。该组件仅适用于Android操作系统。它使用可绘制的本机状态来显示触摸反馈。
它仅支持一个View实例作为子节点。它是通过用另一个RCTView节点实例替换View来实现的。
Props | Type | Required | Description |
---|---|---|---|
background | backgroundPropType | no | 触摸操作反馈的背景。 |
useForeground | bool | no | 将波纹效果添加到前景。 |
TouchableOpacity包装器用于减少按钮的不透明度。它允许用户按下时看到背景。通过将子级包装在动画中,可以控制按钮的不透明度。
链接:https://www.learnfk.comhttps://www.learnfk.com/react-native/react-native-touchables.html
来源:LearnFk无涯教程网
Props | Type | Required | Platform | Description |
---|---|---|---|---|
activeOpacity | number | no | 透明度。 | |
tvParallaxProperties | object | no | iOS | 控制Apple TV视差效果。 |
hasTVPreferredFocus | bool | no | iOS | 只能在Apple TV上使用。 |
方法 | 描述 |
---|---|
setOpacityTo() | 设置透明度。 |
当用户想要处理点击但不想显示任何反馈时,将使用TouchableWithoutFeedback。
Props | Type | Required | Description |
---|---|---|---|
hitSlop | object | no | 定义了触摸可以从按钮开始的距离。 |
onAccessibilityTap | function | no | 如果将accessibility设置为true,则系统在用户执行辅助功能轻击手势时调用此功能。 |
accessibilityHint | string | no | 它有助于用户了解在对可访问性元素执行操作时将发生的情况。 |
accessibilityLabel | node | no | 当用户与元素进行交互时,文本将由屏幕阅读器读取。 |
delayLongPress | number | no | 它以毫秒为单位延迟onLongPress调用onPressIn。 |
用户有时会按下视图并保持一段时间。该长按由使用上述任何“可触摸”组件的onLongPress道具的函数处理。
import React, { Component } from 'react'; import { Alert,Platform,StyleSheet,Text,TouchableHighlight,TouchableOpacity, TouchableNativeFeedback,TouchableWithoutFeedback, View } from 'react-native'; export default class Touchables extends Component { _onPressButton() { Alert.alert('You tapped the button!') } _onLongPressButton() { Alert.alert('You long-pressed the button!') } render() { return ( <View style={styles.container}> <TouchableHighlight onPress={this._onPressButton} underlayColor="white"> <View style={styles.button}> <Text style={styles.buttonText}>TouchableHighlight</Text> </View> </TouchableHighlight> <TouchableOpacity onPress={this._onPressButton}> <View style={styles.button}> <Text style={styles.buttonText}>TouchableOpacity</Text> </View> </TouchableOpacity> <TouchableNativeFeedback onPress={this._onPressButton} background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}> <View style={styles.button}> <Text style={styles.buttonText}>TouchableNativeFeedback</Text> </View> </TouchableNativeFeedback> <TouchableWithoutFeedback onPress={this._onPressButton} > <View style={styles.button}> <Text style={styles.buttonText}>TouchableWithoutFeedback</Text> </View> </TouchableWithoutFeedback> <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white"> <View style={styles.button}> <Text style={styles.buttonText}>Touchable with Long Press</Text> </View> </TouchableHighlight> </View> ); } } const styles = StyleSheet.create({ container: { paddingTop: 60, alignItems: 'center' }, button: { marginBottom: 30, width: 260, alignItems: 'center', backgroundColor: '#5ead97' }, buttonText: { padding: 20, color: 'white', fontSize: 18 } });
输出:
祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)