使用自定义字体反应本机

Question

我正在使用 React Native 自定义字体，这有一个问题。默认情况下，文本居中，当我使用字体时，文本不居中。这是代码。

<TextInput 
    style={{
       height:40, 
       width:width-10, 
       margin:5, 
       backgroundColor:"#eee",
       borderRadius:5,
       paddingLeft:20,
       fontFamily:FONTS.medium  // if I comment this line then placeholder and text input is on center.
     }}
     placeholder="Search Here"
/>

带有默认字体的图片

注意：我已经用多种字体检查过它并且有同样的问题。

Answer 1

如果属性 includeFontPadding 或 lineHeight 删除间距，请尝试。

<Text
  style={{
        backgroundColor: 'red', 
        //lineHeight: 92, 
        fontSize: 24,  
        color: '#000000', 
        fontFamily: 'Roboto-Regular', 
        includeFontPadding: false}}>
        Search Here
</Text>

如果这不起作用，请检查字体本身是否有间距。打开字体文件*.ttf，检查文字是否有大间距

Answer 2

使用 includeFontPadding 属性，它将删除默认 space

<Text  style={{
     includeFontPadding: false
   }}>
     Search Here
</Text>

使用自定义字体反应本机

react-native using custom fonts

react-native

react-native-android

react-native-ios