使用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,
}
})