如何在 Android 的文本组件中使用自定义 fonts 避免额外的空白

Question

我有一个 react-native 项目的跨平台按钮。

所述按钮的样式是：

btn_text: {
  color: "#fff",
  fontSize: "20rem",
  fontFamily: "BungeeInline-Regular",
  textAlign: "center"
},
btn: {
  paddingTop: "10rem",
  paddingBottom: "10rem",
  paddingHorizontal: "15rem",
  marginTop: "15rem",
  marginHorizontal: "20rem",
  backgroundColor: "#333",
  "@media ios": {
    borderRadius: 50
  },
  "@media android": {
    borderRadius: 50,
    elevation: 4
  },
  borderColor: "#fff",
  borderWidth: 0
}

组件是：

const XplatformButton = ({ text, onPress }) => {
  if (Platform.OS === "ios") {
    return (
      <TouchableHighlight
        onPress={onPress}
        style={styles.btn}
        underlayColor={styles.$buttonColorUnderlay}
      >
        <Text style={styles.btn_text}>{text}</Text>
      </TouchableHighlight>
    );
  }
  return (
    <TouchableOpacity onPress={onPress} style={styles.btn}>
      <Text style={styles.btn_text}>{text}</Text>
    </TouchableOpacity>
  );
};
export default XplatformButton;

组件在 iOS 上按预期呈现： iOS_with_font

但是它在 Android 上呈现过多的空白： Android_with_font

但没有指定的字体呈现为： Android_without_font

如何在保留自定义谷歌字体的同时消除 android 上的额外空间？

Answer 1

有一个样式属性仅在 Android 上有效。 它被称为“includeFontPadding”。 它是 boolean。 将其设置为 false 以删除包含的空白。