Demo展示
Touchable.gif
今天学的组件有点于类似于原生Android当中的button，点击它时它的背景会发生变化，给用户一种视觉交互。在Android中叫selector，而在RN中叫Touchable系列。之前在学Text组件时，我们通过onPress事件可以给Text组件绑定触摸点击事件。为了像Text组件那样使得其他组件也可以被点击，RN提供了三个Touchable类组件：
- TouchableHightlight：高亮触摸。用户点击时，会产生高亮效果
- TouchableOpacity：透明触摸。用户点击时，被点击的组件会出现透明效果
- TouchableWithoutFeedback：无反馈性触摸。用户点击时，被点击的组件不会出现任何视觉变化。（没有UI交互，一般很少用）
实现上图效果
import React, {Component} from 'react';
import {
AppRegistry,
StyleSheet,
Text,
TouchableHighlight,
TouchableOpacity,
View
} from 'react-native';
class RNStudyFour extends Component {
show(text) {
alert(text);
}
render() {
return (
<View >
<TouchableHighlight
style={styles.container}
onPress={this.show.bind(this, 'TouchableHighlight activeOpacity')}
activeOpacity={0}
underlayColor="#00FF00">
<View >
<Text style={styles.font}>TouchableHighlight</Text>
<Text style={styles.font}>activeOpacity</Text>
</View>
</TouchableHighlight>
<TouchableHighlight
style={styles.container}
onPress={this.show.bind(this, 'TouchableHighlight underlayColor')}
underlayColor="#00FF00">
<View >
<Text style={styles.font}>TouchableHighlight</Text>
<Text style={styles.font}>underlayColor</Text>
</View>
</TouchableHighlight>
<TouchableOpacity
style={styles.container}
onPress={this.show.bind(this, 'TouchableOpacity')}>
<Text style={styles.font}>TouchableOpacity</Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
height: 100,
backgroundColor: '#FF0000',
borderRadius: 10,
justifyContent: 'center',
alignItems: 'center',
marginLeft: 30,
marginRight: 30,
marginTop: 30
},
font: {
fontSize: 25,
color: '#fff'
},
});
AppRegistry.registerComponent('RNStudyFour', () => RNStudyFour);
实现起来还是比较简单的。有两个地方需要注意一下：
-
TouchableHighlight的activeOpacity和underlayColor
- activeOpacity：触摸时透明度的设置
- underlayColor：点击时背景阴影效果的背景颜色
TouchableHighlight还有两个属性，我们大部是用这两个，其它的就不介绍了。它们之间的区别根据图中可以明显的看出来。因为第一个按钮设置的activeOpacity为0,所以点击第一个按钮后完全不透明。
- TouchableOpacity也有activeOpacity属性，但我们经常不用它，因为默认就设置背景颜色的变化了。
好了。今天的Touchable系列组件就学完了。若有不对之处，还请告知。谢谢！
