上一章React
Native实战教程请查看：React
Native HTTP网络请求
在本章中，我们将向你展示react
Native中的可触摸组件。我们称它们为“可触摸的”，因为它们提供内置的动画，我们可以使用onPress prop来处理触摸事件。
Facebook提供了按钮Button组件，可以用作通用按钮，考虑下面的例子来理解同样的道理。
App.js
import React, {Component} from 'react';
import {Button} from 'react-native';
const App = () => {
const handlePress = () => false;
return <
Button onPress={handlePress} title="红色按钮" color="red" />;
};
export default App;
如果默认按钮组件不适合你的需求，你可以使用以下组件之一。
文章图片
TouchableOpacity这个元素将改变一个可触摸元素的不透明度。
App.js
import React from 'react';
import {TouchableOpacity, StyleSheet, View, Text} from 'react-native';
const App = () => {
return (
<
View style={styles.container}>
<
TouchableOpacity>
<
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当用户按下这个元素时，它会变暗，底层颜色会显示出来。
App.js
import React from 'react';
import {View, TouchableHighlight, Text, StyleSheet} from 'react-native';
const App = props => {
return (
<
View style={styles.container}>
<
TouchableHighlight>
<
Text style={styles.text}>Button<
/Text>
<
/TouchableHighlight>
<
/View>
);
};
export default App;
const styles = StyleSheet.create({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red',
},
});
TouchableNativeFeedback这将模拟当元素被按下时的墨水动画。
App.js
import React from 'react'
import { View, TouchableNativeFeedback, Text, StyleSheet } from 'react-native'const Home = (props) => {
return (
<
View style = {styles.container}>
<
TouchableNativeFeedback>
<
Text style = {styles.text}>
Button
<
/Text>
<
/TouchableNativeFeedback>
<
/View>
)
}
export default Homeconst styles = StyleSheet.create ({
container: {
alignItems: 'center',
},
text: {
borderWidth: 1,
padding: 25,
borderColor: 'black',
backgroundColor: 'red'
}
})
TouchableWithoutFeedback【React Native Button元素 – React Native实战教程】当你想在没有任何动画的情况下处理触摸事件时，应该使用这个组件。
<
TouchableWithoutFeedback>
<
Text>
Button
<
/Text>
<
/TouchableWithoutFeedback>
推荐阅读
- React Native动画LayoutAnimation – React Native实战教程
- React Native HTTP网络请求 – React Native实战教程
- React Native图片Image元素 – React Native实战教程
- React Native ScrollView元素 – React Native实战教程
- React Native使用文本输入TextInput元素 – React Native实战教程
- React Native列表ListView – React Native实战教程
- Scala中的方法重载用法指南
- PHP json_decode()函数用法详细介绍
- CSS实现脉冲和阴影详细代码介绍