資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在React Native中處理觸控事件？
在裝置上，與UI的互動主要透過觸控或點選進行。因此，當我們使用應用程式時，我們大多點選按鈕來執行某些操作，或者透過觸控式螢幕幕來滾動頁面，嘗試縮放頁面等。為了處理這些手勢，例如點選、觸控，React Native 有事件來捕獲它，或者可以使用可觸控元件來處理觸控。
讓我們看看點選按鈕時會發生什麼。
示例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 Native 的可觸控元件有助於捕獲點選手勢，以防像 onPress() 這樣的事件（用於 React Native 元件，如按鈕）出現任何問題。
可觸控元件提供以下選項來處理對任何 React Native 元件的點選手勢
- Touchable Opacity (可觸控不透明度)
- Touchable Highlight (可觸控高亮)
- Touchable Without Feedback (無反饋可觸控)
Touchable Opacity (可觸控不透明度)
此元素在觸控時會更改元素的不透明度。
您可以按如下方式使用 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'
}
});使用者觸控按鈕時，您將看到不透明度的變化。
Touchable Highlight (可觸控高亮)
當用戶按下元素時，它會變暗，並且底層顏色會透出來。
您必須在使用前匯入 TouchableHighlight，如下所示：
import { TouchableHighlight } from 'react-native'Button 元件包裹在 Text 元件內，Text 元件包裹在 TouchableHighlight 元件內。您可以根據需要向元件新增樣式。onPress 函式新增到 TouchableHighlight 中，點選時將顯示警報訊息。
<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'
}
})輸出
Touchable Without Feedback (無反饋可觸控)
當您想要處理觸控事件並且不需要任何反饋時，應該使用此方法。
這裡 Button 包裹在 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'
}
})輸出
更新於：2021年7月1日
498 次瀏覽
廣告