将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,
}
})
这是一个对我有用的简单解决方案...
- 下载Xcode字体工具
- 在终端运行$ ftxdumperfuser -t hhea -A d pathtoyourfont.ttf
- 编辑转储的pathtoyourfont.hhea.xml并设置lineGap =“ 0”
- 如果lineGap为200且ascender =“ 800”,则将ascender设置为这两个1000之和
- 在终端运行$ ftxdumperfuser -t hhea -A pathtoyourfont.ttf
完成]。您的新值将融合回字体文件。
重复步骤4和5,直到渲染正常。请勿更改其他值。那些应该没问题。
最终为我工作的价值是ascender =“ 1050”。尝试更改总和,直到Android和iOS渲染组件的高度相同。
来源:https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d
在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>
与上面详述的概念相同,但是我发现使用Glyphs也很容易。只需打开您正在使用的自定义字体,然后在Glyphs中打开它,请点击“信息”图标,将您带到一个屏幕,该屏幕可让您调整上升,下降和lineGap属性。导出新设置并继续进行调整,直到获得所需的外观为止。