react native text size
v3.0.0
텍스트를 배치하기 전에 정확하게 측정하고 앱 (Android 및 iOS)에서 글꼴 정보를 얻으십시오.
| 우리 나라 (멕시코)에서는 소프트웨어 개발자가 지불금이 잘되지 않았으므로 생계를 유지하기 위해 다른 직업을 찾아야했으며 수년에 걸쳐이 저장소와 다른 저장소를 제출하는 데 더 많은 시간을 할애 할 수 없었습니다. 이 저장소를 유지 관리하는 데 속인 사람이라면 관련 NPM 패키지와 함께이를 기꺼이 전송 해 드리겠습니다. |
|---|
| 우리 나라 (멕시코)에서 소프트웨어 개발자는 겁에 질려서 생계를 유지하기 위해 다른 직업을 찾아야했고 몇 년 동안 돈을 벌지 못한 것 보다이 저장소와 다른 저장소를 유지하는 데 더 많은 시간을 할애 할 수 없었습니다. 누군가이 저장소를 유지 관리하는 데 관심이 있다면 관련 NPM 패키지뿐만 아니라 기꺼이 전송하겠습니다. |
두 가지 주요 기능이 있습니다. 텍스트 블록의 높이를 동시에 얻기위한 flatHeights <FlatList> 또는 <RecyclerListView> 와 같은 구성 요소에 최적화되었습니다.
다른 하나는 measure 이며 텍스트 텍스트에 대한 자세한 정보를 얻습니다.
너비와 높이는 동일한 속성을 가진 <Text> 구성 요소의 onLayout 이벤트에서받은 것과 동일합니다.
두 기능 모두 측정 할 텍스트가 필요하지만 나머지 매개 변수는 선택 사항이며 React Native와 동일한 방식으로 작동합니다.
fontFamilyfontSizefontWeightfontStylefontVariant (iOS)includeFontPadding (Android)textBreakStrategy (Android)letterSpacingallowFontScalingwidth : 텍스트 브로크 전략을 기반으로 자동 라인 브레이크에 대한 제약 조건.Adionion에서 라이브러리에는 앱이 보이는 글꼴에 대한 정보를 얻는 기능이 포함되어 있습니다.
그것이 당신을 도왔다면, 스타 ️ 또는 코피로 내 작업을 지원하십시오.
NPM에서 대부분 자동 설치
yarn add react-native-text-size
react-native link react-native-text-size Android/App/Build.grale 파일의 종속성 블록에서 compile Directive를 implementation 으로 변경하십시오.
요구 사항 :
React Native의 0.56 이전 버전의 경우 React-Native-Text-Size v2.1.1을 사용하십시오.
자동 설치에 문제가있는 경우 대안으로 Wiki의 수동 설치를 참조하십시오.
measure
flatHeights
specsForTextStyles
fontFromSpecs
fontFamilyNames
fontNamesForFamilyName
measure ( options : TSMeasureParams ) : Promise < TSMeasureResult > 이 기능은 RN과 같이 텍스트를 측정하고 결과는 Text 의 OnLayout 이벤트와 함께 구성됩니다. 사용할 글꼴 및 OHER 옵션을 설명하기 위해 <Text> 가 사용하는 속성의 서브 세트가 필요합니다.
width 제공하면 측정 값은 명시 적 선 파단 외에 자동 랩핑을 적용합니다.
* iOS에는 불일치가있을 수 있습니다. 더 많은 것을 알기 위해이 알고있는 문제를 참조하십시오.
메모:
이 기능은 정확하고 완전한 정보를 제공하지만 텍스트가 플랫리스트에 표시 될 수있는 것과 같이 텍스트가 많이 있으면 무거울 수 있습니다. 이러한 경우 배치 처리에 최적화 된 flatHeights 사용하는 것이 좋습니다.
이 속성이있는 일반 JS 객체 ( text 만 필요합니다) :
| 재산 | 유형 | 기본 | 메모 |
|---|---|---|---|
| 텍스트 | 끈 | (없음) | 이것은 유일하게 필요한 매개 변수이며 이모티콘 이나 비어있을 수 있지만 널 null 않아야합니다 .이것이 빈 문자열 인 경우 결과 width 0이됩니다. |
| 글꼴 | 끈 | 나는 의존한다 | 기본값은 iOS의 샌프란시스코 안드로이드의 Roboto에 의해 적용됩니다. 참고 : 장치 제조업체 또는 사용자 정의 ROM은 기본 글꼴을 변경할 수 있습니다. |
| 폰트급 | 끈 | '정상' | 안드로이드에서는 세분성이없고 '500'~ '900'은 '굵게'가되지만 특정 fontFamily ( "Sans-Serif-Thin", "Sans-Serif-Medium"등)를 사용할 수 있습니다. |
| 글꼴 크기 | 숫자 | 14 | 기본 글꼴 크기는 RN에서 제공됩니다. |
| 글꼴 스타일 | 끈 | '정상' | "정상"또는 "이탈리아"중 하나입니다. |
| fontvariant | 정렬 | (없음) | iOS 만 |
| 허용 폰트 스케일 | 부울 | 진실 | 큰 글꼴의 사용자의 설정을 존중합니다 (즉, SP 유닛 사용). |
| 문자 스페이스 | 숫자 | (없음) | 문자 간의 추가 간격 (일명 tracking ).참고 : iOS에서는 제로가 자동 커닝을 취소합니다. API 21+가있는 모든 iOS, Android |
| ontlyfontpadding | 부울 | 진실 | 특정 문자를 클리핑하지 않도록 addionional 상단 및 하단 패딩. 안드로이드 전용 |
| TextBreakStrategy | 끈 | '고산화' | '간단한', '균형'또는 '하이 퀴일'중 하나입니다. API 23+가있는 안드로이드 만 |
| 너비 | 숫자 | max_int | 너비를 제한하십시오. 결과 높이는 텍스트의 자동 흐름에 따라 다릅니다. |
| useprecisewidth | 부울 | 거짓 | true 이라면 결과에는 정확한 width 와 lastLineWidth 속성이 포함됩니다.샘플 앱 에서이 플래그의 효과를 볼 수 있습니다. |
| lineinfoforline | 숫자 | (없음) | >=0 인 경우 결과에는 필요한 줄 번호에 대한 정보가 포함 된 LineInfo 속성이 포함됩니다. |
샘플 앱은 화면에서 이러한 매개 변수의 효과를 대화식으로 보여줍니다.
measure 이 속성으로 JS 객체로 해결되는 약속을 반환합니다.
| 재산 | 유형 | 메모 |
|---|---|---|
| 너비 | 숫자 | 총 사용 된 너비. LES이거나 width 옵션과 같을 수 있습니다.안드로이드 에서이 값은 usePreciseWidth 플래그에 따라 다를 수 있습니다. |
| 키 | 숫자 | includingFontPadding 경우 상단 및 하단 패딩을 포함하여 총 높이가 설정되었습니다 (기본값). |
| Lastlinewidth | 숫자 | 블랭크의 후행없이 마지막 줄의 너비.usePreciseWidth 가 false (기본값) 인 경우이 속성은 정의되지 않습니다. |
| 리네 카운트 | 숫자 | 하드 및 자동 라인이 고려하여 라인 수. |
| LineInfo | 물체 | 라인 정보.lineInfoForLine 옵션이 제공되지 않으면이 속성은 정의되지 않습니다. |
lineInfoForLine 의 값이 Greelter 또는 동일한 lineCount 인 경우이 정보는 마지막 줄 (예 : lineCount -1)입니다.
| 재산 | 유형 | 메모 |
|---|---|---|
| 선 | 숫자 | 이 정보의 줄 번호, 기본 0.lineInfoForLine 라인보다 작을 수 있습니다. |
| 시작 | 숫자 | 이 줄의 시작의 텍스트 오프셋. |
| 끝 | 숫자 | 이 라인에서 마지막으로 보이는 문자 (Whitespace가 계산되지 않음) 후 텍스트 오프셋. |
| 맨 아래 | 숫자 | 패딩을 포함 하여이 라인의 바닥의 수직 위치. |
| 너비 | 숫자 | 선행 마진 들여 쓰기를 포함 하여이 라인의 수평 엑스테이션, 후행 공백을 제외합니다. 사용 usePreciseWidth:true 이 속성에 대한 정확한 값을 얻으려면 true. |
오류의 경우, 약속은 다음 오류 코드 중 하나가있는 확장 된 객체로 거부됩니다.
| 암호 | 세부 |
|---|---|
| e_missing_parameters | measure 제공되지 않은 매개 변수가있는 객체가 필요합니다. |
| e_missing_text | 측정 할 텍스트는 null 이며 제공되지 않았습니다. |
| e_invalid_font_spec | 글꼴 사양은 유효하지 않습니다. 이것이 Android에서 발생할 가능성은 거의 없습니다. |
| e_unknown_error | 글쎄 ... 누가 알아? |
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { }
type State = { width : number , height : number }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const text = 'I ❤️ rnTextSize'
class Test extends Component < Props , State > {
state = {
width : 0 ,
height : 0 ,
}
async componentDidMount ( ) {
const width = Dimensions . get ( 'window' ) . width * 0.8
const size = await rnTextSize . measure ( {
text , // text to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
width : size . width ,
height : size . height
} )
}
// The result is reversible
render ( ) {
const { width , height } = this . state
return (
< View style = { { padding : 12 } } >
< Text style = { { width , height , ... fontSpecs } } >
{ text }
</ Text >
</ View >
)
}
} flatHeights ( options : TSHeightsParams ) : Promise < number [ ] >배열에서 각 문자열의 높이를 계산하십시오.
이는 일반적인 특성 (폭, 글꼴 등), <FlatList> 또는 <RecyclerListView> 구성 요소가있는 일반적인 사용 사례를 가진 수많은 텍스트 블록의 높이를 계산하는 경우에 지정된 measure 을위한 대안입니다.
측정 값은 measure 과 동일한 알고리즘을 사용하지만 각 블록의 높이 만 반환하고 브리지를 통해 여러 단계를 피하면 안드로이드에서 훨씬 더 빠릅니다 !
나는 5,000 랜덤 텍스트 블록에서 테스트를했는데 결과 (MS)였습니다.
measure | flatHeights | |
|---|---|---|
| 기계적 인조 인간 | 49,624 | 1,091 |
| iOS | 1,949 | 732 |
앞으로 나는 같은 카드에 플랫리스트 및 여러 스타일의 사용의 예를 준비 할 것입니다.
이것은 measure 위해 전달한 것과 유사한 객체이지만 text 옵션은 다양한 문자열 배열이며 usePreciseWidth 및 lineInfoForLine 옵션은 무시됩니다.
| 재산 | 유형 | 기본 |
|---|---|---|
| 텍스트 | 끈 [] | (없음) |
| 너비 | 숫자 | 무한대 |
| 글꼴 | 끈 | 나는 의존한다 |
| 폰트급 | 끈 | '정상' |
| 글꼴 크기 | 숫자 | 14 |
| 글꼴 스타일 | 끈 | '정상' |
| fontvariant | 정렬 | (없음) |
| 허용 폰트 스케일 | 부울 | 진실 |
| 문자 스페이스 | 숫자 | (없음) |
| ontlyfontpadding | 부울 | 진실 |
| TextBreakStrategy | 끈 | '고산화' |
결과는 블록이 수신 된 것과 동일한 순서로 각 블록 ( SP )의 높이를 가진 배열로 해결되는 약속입니다.
측정과 달리 null 요소는 발생 오류없이 0을 반환하고 빈 문자열은 RN이 null <Text> 구성 요소에 할당하는 것과 동일한 높이를 반환합니다.
//...
import rnTextSize , { TSFontSpecs } from 'react-native-text-size'
type Props = { texts : string [ ] }
type State = { heights : number [ ] }
// On iOS 9+ will show 'San Francisco' and 'Roboto' on Android
const fontSpecs : TSFontSpecs = {
fontFamily = undefined ,
fontSize = 24 ,
fontStyle = 'italic' ,
fontWeight = 'bold' ,
}
const texts = [ 'I ❤️ rnTextSize' , 'I ❤️ rnTextSize using flatHeights' , 'Thx for flatHeights' ]
class Test extends Component < Props , State > {
state = {
heights : [ ] ,
}
async componentDidMount ( ) {
const { texts } = this . props
const width = Dimensions . get ( 'window' ) . width * 0.8
const heights = await rnTextSize . flatHeights ( {
text : texts , // array of texts to measure, can include symbols
width , // max-width of the "virtual" container
... fontSpecs , // RN font specification
} )
this . setState ( {
heights
} )
}
render ( ) {
const { texts } = this . props
const { heights } = this . state
return (
< View style = { { padding : 12 } } >
{ texts . map (
( text , index ) => (
< Text style = { { height : heights [ index ] , ... fontSpecs } } >
{ text }
</ Text >
)
) }
</ View >
)
}
} specsForTextStyles ( ) : Promise < { [ key : string ] : TSFontForStyle } >실행중인 OS에 대한 시스템 글꼴 정보를 얻으십시오.
이것은 UIFont.preferredFontForTextStyle Oros의 래퍼입니다
결과는 JS 객체가 OS에 의존하는 JS 객체로 해결 되겠다는 약속이지만, 값은 값이 RN 스타일에 사용되는 객체에 완전히 호환되므로 <Text> 또는 <TextInput> 구성 요소를 스타일 화하는 데 사용할 수 있습니다.
| 재산 | 유형 | 메모 |
|---|---|---|
| 글꼴 | 끈 | 시스템 패밀리 이름 또는 글꼴 얼굴. |
| 글꼴 크기 | 숫자 | SP 의 글꼴 크기 (스케일되지 않은). |
| 글꼴 스타일 | tsfontstyle | '이탈리아'인 경우에만 스타일이 '정상'인 경우 정의되지 않았습니다. |
| 폰트급 | tsfontweight | 'Bold'인 경우에만 무게가 '정상'인 경우 정의되지 않습니다. |
| fontvariant | tsfontvariant [] 또는 null | iOS 만 . 현재이 속성을 포함하는 스타일은 없습니다. |
| 문자 스페이스 | 숫자 | 0.55보다 RN LOOWER로 Android에서 실행되는 경우 생략 |
키 이름을 알기 위해 위키의 SpecsfortextStyles의 키를 참조하십시오.
나는 2 ~ 3 개를 제외하고는 각 OS마다 다른 해석을 가지고 있지만 결과의 키를 정상화하려고 시도하지 않았지만 필요에 따라 세관 스타일을 만들기 위해 사용할 수 있습니다.
fontFromSpecs ( specs : TSFontSpecs ) : Promise < TSFontInfo >주어진 사양에서 얻은 글꼴의 특성을 반환합니다.
이 매개 변수는 TSMeasureParams 의 하위 집합이므로 세부 사항은 여기에서 생략됩니다.
| 재산 | 유형 | 기본 |
|---|---|---|
| 글꼴 | 끈 | iOS : '샌프란시스코', Android : 'Roboto' |
| 폰트급 | 끈 | '정상' |
| 글꼴 크기 | 숫자 | 14 |
| 글꼴 스타일 | 끈 | '정상' |
| fontvariant | 끈 [] | (없음) |
| 문자 스페이스 | 숫자 | 0 |
fontFromSpecs includeFontPadding 적 allowsFontScaling:true 및 이것은 측정 함수가 아니기 때문에 의미가 없습니다.
결과는 주어진 글꼴 및 크기에 대한 정보, 안드로이드의 SP 의 단위 또는 iOS의 지점에 대한 정보가있는 JS 객체로 해결되는 약속입니다.
| 재산 | 유형 | 세부 |
|---|---|---|
| 글꼴 | 끈 | Android에서는 매개 변수와 동일한 문자열입니다. |
| fontname | 끈 | iOS만이 Android에서 항상 undefined . |
| 글꼴 크기 | 숫자 | 매개 변수에 소수점이 포함 된 경우 주어진 매개 변수와 다를 수 있습니다. |
| 글꼴 스타일 | 끈 | '정상'또는 '이탈리아'. |
| 폰트급 | 끈 | iOS에서 '정상'또는 'Bold'는 '100'에서 '900'으로 갈 수 있습니다. |
| fontvariant | 끈 [] | iOS만이 Android에서 항상 undefined . |
| 오르다 | 숫자 | 단일 간격 텍스트의 기준선 위의 권장 거리. |
| 내려 | 숫자 | 단일 간격 텍스트에 대한 기준 아래의 권장 거리. |
| Capheight | 숫자 | iOS 자본 캐릭터의 높이. |
| xheight | 숫자 | iOS "x"의 소문자 높이. |
| 맨 위 | 숫자 | 안드로이드 전용 . 글꼴의 Tallles Glyph의 기준선 위의 최대 거리는 글꼴입니다. |
| 맨 아래 | 숫자 | 안드로이드 전용 . 글꼴에서 가장 낮은 글리프에 대한 기준 아래 최대 거리는 기준선입니다. |
| 주요한 | 숫자 | 텍스트 줄 사이에 추가 할 권장되는 추가 공간. |
| LineHeight | 숫자 | 권장 라인 높이. 텍스트에 이모티콘과 같은 유니 코드 기호가 포함되어 있으면 더 커야합니다. |
| _해시시 | 숫자 | 해시 코드는 디버깅에 유용 할 수 있습니다. |
* 플로트를 사용하는 것은 정수보다 정확하며 선호하는 반올림 방법을 사용할 수 있지만이 값에서는 5 자리 이하의 정밀도가 없습니다. 또한 RN은 Android의 서브 픽셀과 함께 작동하지 않으며이 값을 잘라냅니다.
자세히보기 :
Google 자재 디자인 사이트에서 타이포그래피 이해
iOS 용 iOS의 텍스트 처리에 대해
fontFamilyNames ( ) : Promise < string [ ] >시스템에서 사용할 수있는 글꼴 패밀리 이름 배열에 대한 약속을 반환합니다.
iOS에서는 Uikit의 UIFont.familyNames 메소드를 사용합니다.
Android에서 결과는 시스템 글꼴에 대한 하드 코딩되고 앱이 설치 한 글꼴과 동적으로 보완됩니다.
이 목록에 대해 자세히 알아 보려면 Wiki의 Android Fonts 및 Custom Fonts에 대해 참조하십시오.
fontNamesForFamilyName ( fontFamily : string ) : Promise < string [ ] > UIFont.fontNamesForFamilyName 의 래퍼 Uikit의 FontnamesforfamilyName 메소드 방법은 특정 글꼴 패밀리에서 사용할 수있는 글꼴 이름을 반환합니다.
rntextsize의 fontFamilyNames 함수를 사용하여 시스템에서 사용 가능한 글꼴 패밀리 이름 배열을 얻을 수 있습니다.
이것은 iOS 전용 기능입니다. Android에서는 항상 null 로 해결됩니다.
iOS에서는 measure 및 flatHeights 의 결과 폭이 크게 늘어납니다.
iOS에서 RN은 차기를 계산하기 위해 화면의 절대 위치를 설명합니다. rntextsize는 그렇게 할 수 없으며 너비와 높이 모두 최대 1 픽셀 (포인트가 아님)의 차이를 가질 수 있습니다.
RN은 동적 유형 크기를 지원하지 않지만이 기능을 모방 allowFontScaling 훌륭한 작업 letterSpacing 수행합니다.
RN의 향후 버전 이이 문제를 해결하기를 바랍니다.
rntextsize는 sum 함수의 결과 lineHeight 제공하지만 비표준 알고리즘을 사용하여 설정하여 매개 변수로 지원하지 않습니다. 엄격히 가난하지 않은 경우 lineHeight 사용하지 않는 것이 좋습니다. 그러나 사용하는 경우 글꼴 크기보다 30% 이상을 만들거나 더 정밀도를 원할 경우 rntextsize fontFromSpecs 메소드를 사용하십시오.
중첩 <Text> 구성 요소 (또는 내부 이미지 포함)
저는 20 년이 넘는 경험을 가진 풀 스택 개발자이며 대부분의 작업을 무료로 공유하고 다른 사람들을 도와 주려고 노력하지만 많은 시간과 노력이 필요하므로 내 일을 좋아한다면 고려하십시오 ...
물론, 피드백, PR 및 스타들도 환영합니까?
지원해 주셔서 감사합니다!
BSD 2-Clause "단순화 된"라이센스.
© 2018-2019, Alberto Martínez. 모든 권리 보유.
