Как избежать лишних пробелов с помощью пользовательских шрифтов в текстовых компонентах на Android

Question

У меня есть кроссплатформенная кнопка для реактивного проекта.

стиль для указанной кнопки:

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 при сохранении пользовательского шрифта Google?

Answer 1

Существует свойство стиля, которое активно на Android только .Это называется «includeFontPadding».Это логическое значение.установите значение false, чтобы удалить включенный пробел.