React Native TouchableOpacity使用小记-白红宇的个人博客

React Native TouchableOpacity使用小记

发布日期：2022-04-05 00:52:17 浏览次数：3 分类：博客文章

本文共 1004 字，大约阅读时间需要 3 分钟。

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

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

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

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

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

3、TouchableOpacity的margin，margin不会响应点击事件

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

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

视图结构

TouchableOpacity直接设置margin

export default class ComponentTest extends React.Component
     
       {    render() {        return (            // TouchableOpacity直接设置margin，margin不会响应点击事件            
      
        {            }}>                
       
        点我呀
                       
                   
              );    }}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',    },})

转载地址：https://www.cnblogs.com/lijianyi/p/14850391.html 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：React Native 展开收起功能实现

下一篇：React Native组件左右两端展示(flex:1、justifyContent:'space-between')

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章