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

Question

使用Expo和React Native。 在iOS上使用自定义字体时遇到居中困难。 Android渲染没有问题，文本垂直居中完美。在iOS上使用，它略高于中心。

(原生字体在Android和iOS仿真器上都能很好地居中)。

有什么想法可以解决这个问题吗？

下面是代码：

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Font } from 'expo';

export default class  extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      'KlavikaBold': require('./KlavikaBold.otf'),
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
      }
    return (
      <View style={styles.container}>
        <Text style={styles.content}>Home!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    backgroundColor: 'green',
    color: 'white',
    padding: 10,
    textAlignVertical: 'center',
    fontFamily: 'KlavikaBold',
    fontSize: 20,
  }

})

- Rukala

---

请问您能否附上一张图片，展示它的外观和您想要的样子？ - Tim

@TimH 已更新，附带图片。 - Rukala

Answer 1

以下是我为您翻译的内容：

这里有一个对我有效的简单解决方案...

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

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

重复步骤 4 和 5 直到呈现正确。不要更改其他值。那些应该没问题。

对我最终起作用的值是 ascender="1050"。尝试更改总和，直到 Android 和 iOS 渲染组件的高度相同。

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

- David Smith

---

我下载了XCode的字体工具，但由于“command not found: ftxdumperfuser”，我无法使用它。你有同样的问题吗？ - Gus

@Gus，您可能需要将已安装的命令添加到您的PATH中以配置您的shell。命令行实用程序已安装在/Library/Apple/usr/bin/中。[...]确保您已经删除了这些副本（如果需要），或者您的$PATH环境变量以/Library/Apple/usr/bin/开头。 - David

Answer 2

在iOS上，textAlignVertical: 'center'没有效果，但是当将lineHeight设置为fontSize的两倍高度时，您可以实现类似的效果。

我们只需要在iOS上应用双倍行高，因此我们导入了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>

- Tim

---

谢谢你的回答。lineHeight并没有完美居中。不过我喜欢你使用Platform的想法。 - Rukala

@Rukala 不用谢。上述的行高规则适用于标准字体。因为你使用了导入的字体，所以你可能需要调整数值来完美地居中你的文本。希望能对你有所帮助。 - Tim

这不是处理它的最佳方式。如果您更改设备，则对齐将发生变化。 - Mitul Verma

Answer 3

您可以使用以下2种样式来实现垂直居中

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

这里的height和lineHeight必须相同。

- Rajesh N

Answer 4

与上述详细说明相同的概念，但我发现使用Glyphs也很容易。只需打开您正在使用的自定义字体，然后在Glyphs中打开后点击“信息”图标，即可进入一个屏幕，允许您调整上升线、下降线和行间距属性。导出新设置并不断调整，直到达到所需外观。

- SKeney

Answer 5

{{alignSelf: "center"}}

- Dharmik