는 반응 네이티브에서보기에 맞게 글꼴 크기를 조정합니다 - android

Question

텍스트 네비게이션의보기 내에서 텍스트의 글꼴 크기를 자동으로 변경하려면 어떻게해야합니까?

길이가 다른 텍스트가 있는데 그 중 일부는보기에 맞지 않으므로 글꼴 크기가 줄어 듭니다. 나는 문서를 점검하고 이것을 찾았습니다.
https://facebook.github.io/react-native/docs/text.html#adjustsfontsizetofit
그러나 이것은 IOS만을위한 것이며 안드로이드에 필요합니다. 버튼과 터치 가능 영역과 같은 다른 구성 요소와도 작동합니까?

Answer 1

이 방법을 시도해보십시오. 글꼴 크기는이 모든 화면에 대한 작업을 원하지 않습니다 화면

style={ 
    text:{ 
    fontSize:0.05*width 
    } 
} 

에 맞게 만들기 위해 백분율 계산을 위해 스타일의 시도에 따라서

width: Dimensions.get('window').width 

을 다음과 같은 화면 너비에 따라 글꼴 크기를 설정하는 것이 좋습니다 (안드로이드와 IOS 모두)

Answer 2

해상도 기반 글꼴 크기를 구현하는 가장 좋은 방법은 픽셀 비율을 사용하는 것입니다.이 방법은 내 앱 전체에 구현되었습니다. 픽셀 비율은이를 달성하는 데 도움이되는 항목입니다. 픽셀 비율이 작 으면 해상도가 낮아지고 픽셀 비율이 높을수록 해상도가 높아집니다.

PixelRatio.get() === 1 MDPI 안드로이드 장치 (160 dpi)로

PixelRatio.get() === 1.5 hdpi에 안드로이드 장치 (240 dpi)로

PixelRatio.get () === 2 아이폰 4, 4S 아이폰 5, 5C, 5S 아이폰 6 xhdpi 안드로이드 장치 (320 dpi)로

PixelRatio.get() === 3 아이폰 6 플러스 xxhdpi 안드로이드 장치 (480 dpi)로

PixelRatio.get() === 3.5 Ne 코드 아래 XUS 6

스타일 시트이고, u는 당신의 JSX 코드

import { StyleSheet, PixelRatio } from 'react-native' 
import { Colors } from '../../Themes/' 
const FONT_SIZE = 12; 
FONT_SIZE_Requests = 12; 
if ((PixelRatio.get() <= 1.5) &&(PixelRatio.get() > 1)) { 
    FONT_SIZE = 9; 
    FONT_SIZE_Requests = 9; 
} else if (PixelRatio.get() <=1) { 
    FONT_SIZE = 9; 
    FONT_SIZE_Requests=9; 
} else if ((PixelRatio.get() > 1.5) &&(PixelRatio.get() >= 2) && (PixelRatio.get() < 3)) { 
     FONT_SIZE = 10; 
     FONT_SIZE_Requests = 10; 
     } else if (PixelRatio.get() >= 3) { 
     FONT_SIZE = 11; 
     FONT_SIZE_Requests = 11; 
     } 
export default StyleSheet.create({ 
    header: { 
    backgroundColor: Colors.ClayColor 
    }, 
    transparentHeader: { 
    backgroundColor: "#ffffff", 
    elevation: 0 
    }, 
labelStyle:{ 
    margin:0, 
     fontFamily:'roboto_medium', 
     fontSize:FONT_SIZE 
}, 
labelStyleRequests:{ 
    margin:0, 
    fontFamily:'roboto_medium', 
    fontSize:FONT_SIZE_Requests 
} 
})