带有本机基本按钮的裁剪图标答案

【问题标题】：Cropped icon with native base button带有本机基本按钮的裁剪图标
【发布时间】：2019-04-24 23:35:57
【问题描述】：

我正在使用原生基础来创建圆形图标按钮。
当图标很小时，它可以正常工作：

<Button   
    rounded 
    style={{
        borderRadius : 32,
        width : 64,
        height : 64,

    }} 
>
    <Icon  
        name="bell"
        type="MaterialCommunityIcons"
        style={{
            fontSize: 35, 
            marginLeft : 14
        }}
    />
</Button>

当我更改图标大小时，它会被裁剪

<Button   
    rounded 
    style={{
        borderRadius : 32,
        width : 64,
        height : 64,

    }} 
>
    <Icon  
        name="bell"
        type="MaterialCommunityIcons"
        style={{
            fontSize: 60, //bigger icon
            marginLeft : 3
        }}
    />
</Button>

我应该怎么做才能在按钮上显示图标？
编辑：随着按钮变小，问题会变得更糟（垂直裁剪线越来越靠近按钮的中心）

【问题讨论】：

如果你想让图标变大，我认为你也应该把背景圈变大。例如使
您的图标被裁剪，因为按钮溢出被隐藏。为图标提供绝对位置
将图标位置设置为绝对位置会使按钮无法点击
我通过在 Icon 样式中给出小的 fontSize 解决了同样的错误，但这不正确

标签： react-native button icons native-base

【解决方案1】：

您可以创建自己的 Button，而不是尝试使用 native-base 的按钮。您可以将图像包装在 TouchableOpacity 中以使其成为按钮

<TouchableOpacity> 
 <Image style={{ height: 50, width: 50 }} 
   source= {require('../../res/images/bell.png')} /> 
</TouchableOpacity>

【讨论】：