Как отцентрировать негабаритный шрифт внутри ограничительной рамки Text? - PullRequest
Новая
       33

Как отцентрировать негабаритный шрифт внутри ограничительной рамки Text?

0 голосов
/ 27 марта 2019

Я пытаюсь создать простую кнопку с плавающей панелью действий со значком плюса, и у меня возникли проблемы с правильным центрированием плюса в некоторых крайних случаях.Я просто использовал '\ uFF0B' в <Text>, но попытался переключиться на react-native-vector-icons, только чтобы обнаружить, что они тоже использовали шрифт, а не изображение для поддержки экземпляров <Icon>, и что мои проблемы кажутсядля сохранения.

На большинстве экранов и устройств все в порядке, но в некоторых случаях пользователи сообщают, что значок плюса не идеально отцентрирован.У меня есть гипотеза, что это может включать в себя опции доступности пользователей, увеличивающие размер шрифта в приложении сверх размера родительского представления.В любом случае, я могу воспроизвести что-то вроде скриншотов, которыми делятся со мной люди, установив fontSize больше, чем lineHeight.Предполагая, что это проблема -

Как вы центрируете один глиф в области просмотра <Text> (или <Icon>, так как это происходит от <Text>), даже когда fontSize можетбыть намного больше, чем <Text> lineHeight или даже в целом height?

. В приведенном ниже примере размер шрифта "+" в точности удваивает высоту строки, поэтому знак плюс центрируетсячмокните мазок в верхнем правом углу области просмотра, как если бы он находился в поле размером 112dp x 112dp;но вместо этого я хочу, чтобы он находился по центру мертвой точки 56dp x 56dp box с обрезанными руками.Кажется, что никакая комбинация атрибутов стиля не влияет на это, а просто контролирует положение <Icon> в его родительском элементе.

В настоящее время :

Обычно:

screenshot of what it looks like on most screens

Для шрифта увеличенного размера:

screenshot of the poorly centered glyph

Код :

<View style={s.fabStyle}>
  <TouchableOpacity onPress={()=>{this.onPlus()}}>
    <Icon name="plus" style={s.fabText} /> 
  </TouchableOpacity>
</View>

... 

const s = StyleSheet.create({
  fabStyle: {
    position: 'absolute',
    right: 16,
    bottom: 16,
    borderRadius: 28,
    width: 56,
    height: 56,
    backgroundColor: styleConstants.color.primary,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    textAlign: 'center',
  },
  fabText: {
    position: 'relative',
    left: 0,
    top: 0,
    right: 0,
    bottom: 0,
    fontSize: 112,
    color: '#fff',
    textAlign: 'center',
    lineHeight: 56,
    width: 56,
    height: 56,
  },
});

1 Ответ

0 голосов
/ 03 апреля 2019

Это не ответ на сам вопрос, который все еще стоит, а ответ на основную проблему, на случай, если кто-то придет сюда с помощью поиска Google с похожей проблемой.В моем случае это действительно было так, что настройки специальных возможностей приводили к тому, что шрифт становился больше, чем он должен был быть, таким образом вызывая описанный выше сценарий.Хотя я до сих пор не знаю, как правильно центрировать текст в этом случае, в моем случае проблему можно обойти, убедившись в allowFontScaling=false для соответствующих видов, содержащих текст.

...