react-native 的绑定事件方式与web不同,View 和 Text组件无法绑定点击事件
只能通过专门的事件组件TouchableWithoutFeedback
、TouchableOpacity
、TouchableHighlight
来绑定点击事件
1. TouchableWithoutFeedback 点击无特效
2. TouchableOpacity 点击透明
3. TouchableHighlight 点击高亮
示例
import React from 'react';
import {
StyleSheet,
Text,
View,
TouchableHighlight,
TouchableOpacity,
TouchableWithoutFeedback,
} from 'react-native';
const App = () => {
return (
<View style={styles.container}>
<TouchableWithoutFeedback
onPress={() => {
console.log('只有点击');
}}>
<Text style={[styles.btn, styles.btn2]}> 只有点击 </Text>
</TouchableWithoutFeedback>
<TouchableOpacity
activeOpacity={0.7}
onPress={() => {
console.log('点击半透明');
}}>
<Text style={[styles.btn, styles.btn1]}> 点击透明 </Text>
</TouchableOpacity>
<TouchableHighlight
activeOpacity={0.85}
underlayColor="#DDDDDD"
onPress={() => {
console.log('点击高亮');
}}>
<Text style={styles.btn}> 点击高亮一整行 </Text>
</TouchableHighlight>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
},
btn: {
height: 45,
width: 120,
backgroundColor: '#738998',
color: '#fff',
fontSize: 18,
textAlign: 'center',
textAlignVertical: 'center',
includeFontPadding: false,
},
btn1: {
backgroundColor: '#782484',
},
btn2: {
backgroundColor: '#245367',
},
});
export default App;
网友评论