zoukankan      html  css  js  c++  java
  • React Native TouchableOpacity使用小记

    项目中我们会经常使用到TouchableOpacity这个组件,下面简述下自己的见解:

    1、相当于一个有点击功能的View

    所以可以像View一样设置样式

    2、被包含组件的margin响应点击事件

    所以我们要控制点击热区时,应当将margin考虑在内,这个比较好理解margin也是组件的一部分

    3、TouchableOpacitymargin,margin不会响应点击事件

    所以我们可以通过此简化布局

    例如我们只想让白色卡片响应点击事件,而不想让间距响应点击事件,如图所示效果

    视图结构

    TouchableOpacity直接设置margin
    export default class ComponentTest extends React.Component<IProps> {
    
        render() {
            return (
                // TouchableOpacity直接设置margin,margin不会响应点击事件
                <TouchableOpacity style={style.item_top_bg} onPress={() => {
    
                }}>
                    <Text style={style.item_tab}>点我呀</Text>
                    <Image source={require('../../../image/report_right.png')} />
                </TouchableOpacity>
            );
        }
    
    
    }
    
    const style = StyleSheet.create({
        item_top_bg: {
            borderRadius: 8,
            marginHorizontal:10,
            marginBottom: 10,
            paddingHorizontal: 15,
            paddingVertical: 20,
            flexDirection: 'row',
            alignItems: 'center',
            backgroundColor: '#FFFFFF',
        },
    
        item_tab: {
            flex: 1,
            fontSize: DeviceHelp.fontSize(17),
            fontWeight: DeviceHelp.fontBold,
            color: '#3480FF',
        },
    
    })
  • 相关阅读:
    基于ModBus-TCP/IT 台达PLC 通讯协议解析
    TNS-12541: TNS: 无监听程序 解决方案
    一个很好的ping端口的工具
    上位机(开发)
    无名
    网站部署
    cordova 开发
    mono 开发
    调用 浏览器 插件
    MacBook 配置
  • 原文地址:https://www.cnblogs.com/lijianyi/p/14850391.html
Copyright © 2011-2022 走看看