Обрезанный значок с родной базовой кнопкой - PullRequest
0 голосов
/ 22 ноября 2018

Я использую собственную базу для создания круглых кнопок с иконками.
Когда иконка маленькая, она отлично работает:

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

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

Icon works fine
Когда яизмените размер значка, он будет обрезан

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

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

Icon is cropped
Что нужно сделать, чтобы отобразить значок над кнопкой?
РЕДАКТИРОВАТЬ: проблема усугубляетсякогда кнопка становится меньше (вертикальная линия обрезки становится ближе к центру кнопки)

1 Ответ

0 голосов
/ 15 декабря 2018

Вместо того, чтобы пытаться использовать кнопку native-base, вы можете создать свою собственную кнопку.Вы можете обернуть изображение в TouchableOpacity, чтобы сделать его кнопкой

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