一、Touchable手势
1.React Native提供了4个组件来做这个事情,具体如下:
TouchableHighlight:高亮触摸,用户点击时,会产生高亮效果;
TouchableNativeFeedback:
TouchableOpacity:透明触摸,用户点击时,点击的组件不会出现任何视觉变化;
TouchableWithoutFeedback:无反馈触摸,用户点击时,点击的组件不会有任何视觉变化;
2.这4个组件,我们可以应用某个部分绑定上Touch事件,并支持一下方法:
onPress:
onPressIn:
onPressOut:
onLongPress:
3.下面我们以实例演示下,相关代码实现:
Index.android.js文件:
import React, {
… …
TouchableHighlight,
} from 'react-native';
class AwesomeProject extends Component {
show(text) {
alert(text);
}
//手势相关事件的实现
onPressIn(){
this.start = Date.now()
console.log("press in")
}
onPressOut(){
console.log("press out")
}
onPress(text){
console.log("press")
alert(text);
}
onLonePress(){ AppRegistry,
console.log("long press "+(Date.now()-this.start))
}
render() {
return(
<View style={styles.container}>
//TouchableHighlight包裹绑定Touch手势的组件,并实现支持的4个事件
<TouchableHighlight style={styles.touchable} onPressIn={this.onPressIn} onPressOut={this.onPressOut}
onPress={this.onPress.bind(this,'点击了吗?')} onLongPress={this.onLonePress}>
<View style={styles.button}></View>
</TouchableHighlight>
</View>
)
};
}
var styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
button:{
width: 200,
height: 200,
borderRadius: 100,
backgroundColor: 'red'
},
touchable: {
borderRadius: 100
},
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);
4.点击,我们看见具体的运行效果如下:
5.我们使用Debug模式,研究下4个手势出现的条件和顺序;
摇晃手机,选择Debug JS;