React Native 提供了4个“ Touchable 系列组件”供我们使用（其中最后一个是 Android 专有的），具体如下：
- TouchableHighlight：高亮触摸。用户点击时，会产生高亮效果。
- TouchableOpacity：透明触摸。用户点击时，点击的组件会出现透明过渡效果。
- TouchableWithoutFeedback：无反馈性触摸。用户点击时，点击的组件不会出现任何视觉变化。
- TouchableNativeFeedback：Android 系统专用组件。用户点击时会有一种名为涟漪（ripple）的触摸效果。
TouchableHighlight
本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低，同时会有一个底层的颜色透过而被用户看到，使得视图变暗或变亮。
属性
| 名称 | 类型 | 说明 |
|---|---|---|
| activeOpacity | number | 指定封装的视图在被触摸操作激活时以多少不透明度显示（0到1之间，默认值为0.85）。 |
| onHideUnderlay | function | 底层的颜色被隐藏的时候调用。 |
| onShowUnderlay | function | 当底层的颜色被显示的时候调用。 |
| underlayColor | color | 有触摸操作时显示出来的底层的颜色。 |
实例
1. 逻辑代码
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableHighlight
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
_onPress = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<View style={styles.container}>
<TouchableHighlight
style={styles.button}
onPress ={this._onPress}
>
<Text style={styles.buttonText}>点击</Text>
</TouchableHighlight>
<View style={styles.countContainer}>
<Text style ={styles.countText}>
{this.state.count !== 0 ? this.state.count:null}
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal:10,
backgroundColor: 'white'
},
button: {
alignItems: 'center',
backgroundColor: '#1FB9FF',
padding:10
},
buttonText: {
color:'white'
},
countContainer: {
alignItems: 'center',
padding:10
},
countText: {
color:'green'
}
});
2. 效果图
touchable01.jpg
TouchableOpacity
本组件用于封装视图，使其可以正确响应触摸操作。当按下的时候，封装的视图的不透明度会降低。
属性
| 名称 | 类型 | 说明 |
|---|---|---|
| activeOpacity | number | 指定封装的视图在被触摸操作激活时以多少不透明度显示（0到1之间）。 |
实例
1. 逻辑代码
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
}
}
_onPress = () => {
this.setState({
count: this.state.count + 1
});
}
render() {
return (
<View style={styles.container}>
<TouchableOpacity
style={styles.button}
onPress ={this._onPress}
>
<Text style={styles.buttonText}>点击</Text>
</TouchableOpacity>
<View style={styles.countContainer}>
<Text style ={styles.countText}>
{this.state.count !== 0 ? this.state.count:null}
</Text>
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal:10,
backgroundColor: 'white'
},
button: {
marginLeft: 30,
marginTop: 30,
width: 100,
height: 100,
backgroundColor: '#18B4FF',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 50,
},
buttonText: {
color:'white'
},
countContainer: {
alignItems: 'center',
padding:10
},
countText: {
color:'green'
}
});
2. 效果图
touchable02.jpg
TouchableWithoutFeedback
除非你有一个很好的理由，否则不要用这个组件。
1. 组件普通属性
这些属性，不仅 TouchableWithoutFeedback 组件有，TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback 组件上也是可用的。
- delayLongPress：用来设置按了多少毫秒后，onLongPress 事件会被激活。（默认值：500ms）
- delayPressIn：用来设置手指接触屏幕多少毫秒后，onPressIn 事件会被激活。（默认值：0）
- delayPressOut：用来设置手指离开屏幕多少毫秒后，onPressOut 事件会被激活。（默认值：0）
2. 组件事件属性
这些属性，不仅 TouchableWithoutFeedback 组件有，TouchableHighlight，TouchableOpacity，TouchableWithoutFeedback 组件上也是可用的。
- onLongPress：长按事件
- onPressIn：触摸进入事件
- onPressOut：触摸释放事件
- onPress：触摸点击事件
3. 实例代码
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableWithoutFeedback
} from 'react-native';
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
text: 'hello'
}
}
show(text) {
alert(text);
}
render() {
return (
<View style={styles.container}>
< TouchableWithoutFeedback
onLongPress={() => this.setState({ text: "长按" })}
onPressIn={() => this.setState({ text: "按下" })}
onPressOut={() => this.setState({ text: "松开" })}
onPress ={this.show.bind(this,'做最特别的一个')}
>
<View style={styles.button}>
<Text style={styles.buttonText}>{this.state.text}</Text>
</View>
</TouchableWithoutFeedback>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal:10,
backgroundColor: 'white'
},
button: {
marginLeft: 30,
marginTop: 30,
width: 100,
height: 100,
backgroundColor: '#18B4FF',
justifyContent: 'center',
alignItems: 'center',
borderRadius: 50,
},
buttonText: {
color:'white'
},
countContainer: {
alignItems: 'center',
padding:10
},
countText: {
color:'green'
}
});
4. 效果图
touchable03.jpg
TouchableNativeFeedback
本组件用于封装视图，使其可以正确响应触摸操作（仅限Android平台）。在Android设备上，这个组件利用原生状态来渲染触摸的反馈。
1. 组件属性
主要设置的是 background 属性，TouchableNativeFeedback.Ripple 函数接收两个参数：
- 第 1 个参数：按下时按钮改变的颜色。
- 第 2 个参数：涟漪效果是否被限制在 TouchableNativeFeedback 的显示区域。
2. 示例代码
import React, { Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableNativeFeedback
} from 'react-native';
export default class App extends Component {
show(text) {
}
render() {
return (
<View style={styles.container}>
< TouchableNativeFeedback
onPress={this.show.bind(this, '做最特别的一个')}
background={TouchableNativeFeedback.Ripple('blue', false)}
>
<View style={styles.button}>
<Text style={styles.buttonText}>haha</Text>
</View>
</TouchableNativeFeedback>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingHorizontal:10,
backgroundColor: 'white'
},
button: {
marginLeft: 30,
marginTop: 30,
width: 100,
height: 60,
backgroundColor: '#18B4FF',
justifyContent: 'center',
alignItems: 'center',
},
buttonText: {
color:'white'
},
});
3. 效果图
touchable04.jpg
网友评论