React Native iOS中的垂直中心自定义字体

Question

将React Native与Expo一起使用。 在iOS上难以将自定义导入字体居中。 Android渲染没有问题，文本垂直居中完美。使用iOS，它比中心稍高。

（本机字体在两个模拟器（Android和iOS）上均居中）。

有什么想法可以解决吗？

下面的代码：

toDoItems.forEach((item) => {
    let p = document.createElement('p');
    p.innerText = item;
    document.querySelector('#item-list').appendChild(p); 
});

Answer 1

在iOS上textAlignVertical: 'center'无效，但是将lineHeight设置为fontSize的两倍高度时，您可以获得类似的结果。

我们只需要在iOS上应用加倍的lineHeight，因此我们导入Platform

import { StyleSheet, Text, View, Platform } from 'react-native';   // add Platform at the beginning 

，然后更改以下内容：

<Text style={[styles.content, {lineHeight: Platform.OS === 'ios' ? 40 : 20 }]}>Home!</Text>

Answer 2

这是一个对我有用的简单解决方案...

  

  
1. 下载Xcode字体工具
  
2. 在终端运行$ ftxdumperfuser -t hhea -A d pathtoyourfont.ttf
  
3. 编辑转储的pathtoyourfont.hhea.xml并设置lineGap =“ 0”
  
4. 如果lineGap为200且ascender =“ 800”，则将ascender设置为这两个1000之和
  
5. 在终端运行$ ftxdumperfuser -t hhea -A pathtoyourfont.ttf
  

     

完成。您的新值将融合回字体文件。

     

重复步骤4和5，直到渲染正常。请勿更改其他值。那些应该没问题。

     

最终为我工作的价值是ascender =“ 1050”。尝试更改总和，直到Android和iOS渲染组件的高度相同。

来源：https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d

Answer 3

与上面详述的概念相同，但是我发现使用Glyphs也很容易。只需打开您正在使用的自定义字体，然后在Glyphs中打开它，请点击“信息”图标，将您带到一个屏幕，该屏幕允许您调整上升，下降和lineGap属性。导出新设置并继续进行调整，直到获得所需的外观为止。

Answer 4

您可以使用以下两种样式使垂直居中

...Platform.select({ios: {lineHeight: verticalScale(55)}, android: {textAlignVertical: 'center',}}),
    height: verticalScale(55),

此处的height和lineHeight必须相同。

Answer 5

{{alignSelf：“居中”}}