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

问题描述 投票:3回答:3

将React Native与Expo一起使用。在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,
  }

})

enter image description here enter image description here

css react-native react-native-android react-native-ios
3个回答
3
投票

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

  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


0
投票

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

0
投票

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

© www.soinside.com 2019 - 2024. All rights reserved.