从零学React Native之09可触摸组件
可触摸组件有: TouchableHighlight当一个组件成为TouchableHighlight组件的子组件后,这个组件触摸时会产生一种变暗的效果,原理就是让被子组件遮盖住的下一层颜色向上透出来,这样就使子组件变暗或颜色,默认透传上来是黑色,可以通过underlayColor指定透传的颜色。activeOpacity属性可以指定透明度. 默认是0.8。 import React,{ Component } from 'react';
import {
AppRegistry,StyleSheet,View,TouchableHighlight,TouchableNativeFeedback
} from 'react-native';
class AwesomeProject extends Component {
render() {
return (
//根View
<View style={{flex:1,backgroundColor:'white'}}>
<TouchableHighlightonPress={this.buttonPressed}>
<View style={{width:120,height:70,backgroundColor:'grey'}}/>
</TouchableHighlight>
</View>
);
}
buttonPressed(){
console.log("press");
}
}
按下前效果: 可以看到右侧不应该变暗的地方也变暗了, 这个可以在右侧增加一些其他需要显示的组件,或者为整个背景加个图片就可以解决。 当然还是建议大家使用TouchableOpacity。 TouchableOpacity当一个组件成为TouchableOpacity组件的子组件后,这个组件被触摸时会变成半透明的组件,通过activeOpacity 控制透明度,默认是0.2 。 ...
render() {
return (
//根View
<View style={{flex:1,backgroundColor:'white'}}>
<TouchableOpacity onPress={this.buttonPressed}>
<View style={{width:120,backgroundColor:'grey'}}/>
</TouchableOpacity>
</View>
);
}
...
TouchableOpacity按下效果: 回调函数和其它属性
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |