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',
        },
    
    })
  • 相关阅读:
    Linux-进程描述(1)—进程控制块
    C++中的继承(2)类的默认成员
    Linux系统date命令的参数及获取时间戳的方法
    new/new[]和delete/delete[]是如何分配空间以及释放空间的
    golang垃圾回收
    golang内存分配
    go中的关键字-reflect 反射
    go中的关键字-go(下)
    go中的关键字-go(上)
    go中的关键字-defer
  • 原文地址:https://www.cnblogs.com/lijianyi/p/14850391.html
Copyright © 2011-2022 走看看