React Native 텍스트에서 세로 간격 제거

Question

Poppins 글꼴 모음을 사용하기 위해 CustomText 구성 요소를 만들었습니다. 하지만 이를 사용하면 글꼴 크기가 커짐에 따라 세로 공간이 점점 커지게 되어 두 CustomText 구성 요소 사이에 불필요한 공간이 생깁니다.

padding:0,margin:0,line-height:undefine |fontSize를 사용해 보았지만 아무 것도 작동하지 않았습니다. 이것은 내 CustomText 코드입니다:

const CustomText: React.FC<CustomTextProps>

  스타일,
  굵게,
  이탤릭체,
  글꼴 크기,
  색상,
  ...restProps
}) =>
  글꼴 크기 ??= 글꼴 크기.xsm;
  const 결합스타일 = [
    스타일.기본텍스트,
    스타일,
    isBold &&style.boldText,
    isItalic &&styles.italicText,
    { 글꼴 크기: 글꼴 크기 },
    { 색상: 색상 ??
  ];

  return <Text style={combinedStyles} {...restProps} />
};

const 스타일 = StyleSheet.create({
  기본텍스트: {
    글꼴 패밀리: "Poppins-Regular",
  },
  굵은 텍스트: {
    글꼴 패밀리: "Poppins-Bold",
  },
  기울임꼴텍스트: {
    글꼴 패밀리: "Poppins-Italic",
  },
});

다음은 샘플 이미지를 사용할 때 어떤 일이 발생하는지 보여주는 예입니다

세로 공간을 확인하기 위해 backgroundColor:'green'을 사용했는데 너무 과했습니다.

텍스트 요소 사이의 간격을 제어하고 싶습니다. 나는 기본적으로 반응하는 것이 처음입니다. 어떤 도움이라도 대단히 감사하겠습니다. 감사합니다

Answer 1

기본적으로 lineHeight 속성은 글꼴 크기의 배수로 설정됩니다.

{lineHeight: fontSize}combinedStyles에 (또는 원하는 다른 금액)을 추가하여 직접 설정할 수 있습니다.

으아악

또한 paddingTop 또는 paddingBottom 또는 ma​​rginTop 또는 ma​​rginBottom을 개별적으로 설정해 보세요. 일반 패딩 및 여백을 재정의하여 다른 곳에서 정의될 수 있습니다.

기본 글꼴 패딩이 있을 수 있으므로 includeFontPadding: false도 설정하세요.