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

Question

Using React Native with Expo. Having difficulties centering custom imported font, at iOS. Android rendering with no issues, the text is vertically centered perfectly. Using iOS it is slightly upper than the center.

(Native Font centering well on both emulators - Android and iOS).

Any ideas how this could be solved?

Code below:

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

Here's an easy solution that worked for me...

1. Download Font Tools for Xcode
2. In Terminal run $ ftxdumperfuser -t hhea -A d pathtoyourfont.ttf
3. Edit dumped pathtoyourfont.hhea.xml and set lineGap="0"
4. If lineGap was 200 and ascender="800", set ascender to the sum ot these two 1000
5. In Terminal run $ ftxdumperfuser -t hhea -A f pathtoyourfont.ttf

Done. Your new values are fused back the font file.

Repeat steps 4 and 5 until the rendering is OK. Do not change other values. Those should be OK.

Value that finally worked for me was ascender="1050". Try to change the sum until Android and iOS render the component the same height.

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

Answer 2

On iOS textAlignVertical: 'center' has no effect, but you can achieve a similar result when setting the lineHeight to the doubled height of the fontSize .

We only need to apply the doubled lineHeight on iOS, therefore we import Platform

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

and then change the following:

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

Answer 3

you can make vertical center using following 2 style

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

here height and lineHeight must be same.

Answer 4

Same concept as detailed above but I found that using Glyphs was easy as well. Simply open the custom font you are working with and then once opened in Glyphs hit the "info" icon to bring you to a screen that allows you to adjust the ascender, descender, and lineGap properties. Export the new settings and keep adjusting until you get it to look as needed.

Answer 5

{{alignSelf：“中心”}}