React Native의 고정 폭 텍스트

7년 동안 매일 React Native 작업을 했음에도 불구하고 저는 여전히 그것에 대해 끊임없이 새로운 것을 배우고 있습니다. 최근에는 fontVariant 구성 요소의 Text style prop이었습니다.

This post was published a week ago on React Native School. Be sure to visit for the latest tips, tricks and tutorials on React Native!

React Native에서 다중 테마 스톱워치 앱을 작업하고 있었는데(open source !) 각 숫자의 너비가 다른 문제가 발생했습니다.

일반적으로 이것은 문제가 되지 않지만 1밀리초마다 숫자를 변경하는 경우 매우 바빠 보입니다.



이 문제를 해결하려면 간단한 하나의 라이너가 필요합니다.

텍스트 스타일을 지정할 때 fontVariant: ["tabular-nums"] 를 추가하십시오. 이렇게 하면 텍스트 너비가 고정되어 레이아웃이 고정됩니다.

example app의 코드:

// ...

const styles = StyleSheet.create({
  // ...
  timeText: {
    fontSize: 60,
    fontWeight: "300",
    marginTop: 100,
    fontVariant: ["tabular-nums"], // fixed width character
  },
})

export default StopWatch

MDN has a good resource을 통해 font-variant CSS 속성에 대해 자세히 알아볼 수 있습니다.