如何在 ReactNative 中处理触摸?
react nativejavascriptmobile development
在设备上,与 UI 的交互主要通过触摸或点击进行。因此,当我们使用应用程序时,我们主要点击按钮来执行某些操作,或者通过触摸屏幕滚动页面,尝试缩放页面等。为了处理这些像点击这样的手势,touch reactnative 具有捕获它的事件或可触摸组件来处理触摸。
让我们看一个按钮被点击时会发生什么的例子。
示例 1:处理按钮上的点击
这是一个简单的按钮示例。
<Button onPress={() => { alert('You Tapped on Me!'); }} title="Tap Me" />
当用户点击按钮时,将调用 onPress 事件。这是一个实际示例。
import React from 'react'; import { Button, View, Alert } from 'react-native'; const App = () => { return ( <View style={{flex :1, justifyContent: 'center', margin: 15 }}> <Button onPress={() => { alert('You Tapped on Me!'); }} title="Tap Me" /> </View> ); } export default App;
输出
可触摸组件
React 原生可触摸组件有助于在事件(如按钮等 React 原生组件上使用的 onPress())出现任何问题时捕获点击手势。
可触摸组件带有以下选项来处理任何 React 原生组件上的点击手势
- 可触摸不透明度
- 可触摸突出显示
- 可触摸无反馈
可触摸不透明度
此元素在触摸时会改变元素的不透明度。
您可以按如下方式使用 TouchableOpacity −
<TouchableOpacity onPress={() => alert('You Tapped Me')}> <Text style = {styles.text}> Button </Text> </TouchableOpacity>
这是一个有效示例 −
import React from 'react' import { TouchableOpacity, StyleSheet, View, Text } from 'react-native' const App = () => { return ( <View style = {styles.container}> <TouchableOpacity onPress={() => alert('You Tapped Me')}> <Text style = {styles.text}> Button </Text> </TouchableOpacity> </View> ) } export default App const styles = StyleSheet.create ({ container: { alignItems: 'center', }, text: { borderWidth: 1, padding: 25, borderColor: 'black', backgroundColor: 'red' } });
当用户触摸按钮时,您将看到不透明度 −
可触摸突出显示
当用户按下元素时,它会变暗,底层颜色会显示出来。
您必须先导入 TouchableHighlight ,然后才能使用它,如下所示 −
import { TouchableHighlight } from 'react-native'
Button 组件包裹在 Text 组件内,而 Text 位于 TouchableHighlight 组件内。您可以根据需要向组件添加样式。在 TouchableHighlight 上添加了 onPress 函数,点击后将显示警告消息。
<TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}> <Text style = {styles.text}> Button </Text> </TouchableHighlight>
完整工作示例如下 −
import React from 'react' import { View, TouchableHighlight, Text, StyleSheet } from 'react-native' const App = (props) => { return ( <View style = {styles.container}> <TouchableHighlight onPress={() => alert('You Tapped Me')} activeOpacity={0.6}> <Text style = {styles.text}> Button </Text> </TouchableHighlight> </View> ) } export default App const styles = StyleSheet.create ({ container: { padding:100, alignItems: 'center', }, text: { borderWidth: 1, padding: 25, borderColor: 'black', backgroundColor: 'gray' } })
输出
无反馈的可触摸
当您想要处理触摸事件并且不需要任何反馈时,应该使用此选项。
此处按钮被包裹在 TouchableWithoutFeedback 组件内,如下所示 −
<TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}> <Text style = {styles.text}> Button </Text> </TouchableWithoutFeedback>
示例:使用 TouchableWithoutFeedback 组件
import React from 'react' import { View, TouchableWithoutFeedback, Text, StyleSheet } from 'react-native' const Home = (props) => { return ( <View style = {styles.container}> <TouchableWithoutFeedback onPress={() => alert('You Tapped Me')}> <Text style = {styles.text}> Button </Text> </TouchableWithoutFeedback> </View> ) } export default Home const styles = StyleSheet.create ({ container: { padding:100, alignItems: 'center', }, text: { borderWidth: 1, padding: 25, borderColor: 'black', backgroundColor: 'gray' } })