React原生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,
  }

})

Answer 1

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

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

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

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

最终对我有用的值是 assender="1050"。尝试更改总和，直到 Android 和 iOS 将组件呈现相同的高度。

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

Answer 2

在 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>