React Native开发之——组件TouchableOpacity
2018-03-09 09:27
495 查看
前言
TouchableOpacity用于使视图正确响应触摸的包装器。按下,封装视图的透明度降低,使其变暗。 这个组件比较简单,属性较少,简单说明如下:activeOpacityTouchableOpacity使用说明
activeOpacity属性
activeOpacity用于显示透明度,0-完全透明,1-完全不透明实例练习
export default class App extends Component<Props> { render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this._onPressImage} activeOpacity={0.3}> <Image style={styles.button} source={require('./imgs/mybutton.jpg')}/> </TouchableOpacity> <TouchableOpacity onPress={this._onPressText} activeOpacity={0.3}> <Text>文本</Text> </TouchableOpacity> </View> ); } _onPressImage() { //alert("onPressButton") } _onPressText() { } }
效果图
其他
参考:RN_TouchableOpacity相关文章推荐
- React-Native 组件开发方法
- [深入剖析React Native]React Native组件之Touchable*源码解析(1)
- React Native交互组件之Touchable
- 一起来点React Native——常用组件之Touchable系列
- 【React Native开发】React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)
- 【React Native开发】React Native控件之ScrollView组件讲解(14)
- 【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)
- 【React Native开发】React Native控件之Image组件解说与美团首页顶部效果实例(10)
- 【React Native开发】 - ViewParger轮播组件
- 【React Native开发】React Native控件之Touchable*系列组件详解(18)
- React-Native开发:react-native-image-crop-picker图片上传组件的使用(安卓)
- React Native开发之——组件Image
- (五)React Native---Touchable组件
- React Native按钮详解|Touchable系列组件使用详解
- 【React Native开发】 - WebView组件的使用
- react native TouchableOpacity(点击渐变) TextInput
- react-native当点击TouchableOpacity时,要点击两下才会触发onPress解决办法
- 【React Native开发】React Native控件之WebView组件详解以及实例使用(22)
- ReactNative开发——Text组件
- 【React Native开发】React Native控件之Image组件讲解与美团首页顶部效果实例(10)