반응 형 네이티브 글꼴 크기

네이티브 핸들에 어떻게 반응하는지 또는 반응 형 글꼴을 수행하는지 묻고 싶습니다. 예를 들어, iphone 4s에서는 fontSize : 14가 있고 iPhone 6에서는 fontSize : 18이 있습니다.

PixelRatio 를 사용할 수 있습니다.

예를 들면 :

var React = require('react-native');

var {StyleSheet, PixelRatio} = React;

var FONT_BACK_LABEL   = 18;

if (PixelRatio.get() <= 2) {
  FONT_BACK_LABEL = 14;
}

var styles = StyleSheet.create({
  label: {
    fontSize: FONT_BACK_LABEL
  }
});

편집하다:

또 다른 예:

import { Dimensions, Platform, PixelRatio } from 'react-native';

const {
  width: SCREEN_WIDTH,
  height: SCREEN_HEIGHT,
} = Dimensions.get('window');

// based on iphone 5s's scale
const scale = SCREEN_WIDTH / 320;

export function normalize(size) {
  const newSize = size * scale 
  if (Platform.OS === 'ios') {
    return Math.round(PixelRatio.roundToNearestPixel(newSize))
  } else {
    return Math.round(PixelRatio.roundToNearestPixel(newSize)) - 2
  }
}

용법:

fontSize: normalize(24)

<Text />미리 정의 된 크기로 모든 구성 요소 에 크기를 사용할 수 있도록 허용하여 한 단계 더 나아갈 수 있습니다 .

예:

const styles = {
  mini: {
    fontSize: normalize(12),
  },
  small: {
    fontSize: normalize(15),
  },
  medium: {
    fontSize: normalize(17),
  },
  large: {
    fontSize: normalize(20),
  },
  xlarge: {
    fontSize: normalize(24),
  },
};

우리는 우리가 작성한 간단하고 직관적 인 확장 유틸리티 함수를 사용합니다.

import { Dimensions } from 'react-native';
const { width, height } = Dimensions.get('window');

//Guideline sizes are based on standard ~5" screen mobile device
const guidelineBaseWidth = 350;
const guidelineBaseHeight = 680;

const scale = size => width / guidelineBaseWidth * size;
const verticalScale = size => height / guidelineBaseHeight * size;
const moderateScale = (size, factor = 0.5) => size + ( scale(size) - size ) * factor;

export {scale, verticalScale, moderateScale};

많은 ifs를 수행하는 시간을 절약합니다. 내 블로그 게시물 에서 이에 대한 자세한 내용을 읽을 수 있습니다 .

반응 형 단위는 현재 반응 형 네이티브에서 사용할 수 없기 때문에 가장 좋은 방법은 화면 크기를 감지 한 다음이를 사용하여 장치 유형을 추론하고 fontSize를 조건부로 설정하는 것입니다.

다음과 같은 모듈을 작성할 수 있습니다.

function fontSizer (screenWidth) {
  if(screenWidth > 400){
    return 18;
  }else if(screenWidth > 250){
    return 14;
  }else { 
    return 12;
  }
}

각 장치의 기본 너비와 높이를 조회하기 만하면됩니다. 장치의 방향이 변경 될 때 너비와 높이가 뒤집힌 경우 가로 세로 비율을 대신 사용하거나 두 치수 중 더 작은 크기를 파악하여 너비를 알아낼 수 있습니다.

이 모듈 또는 이 모듈 은 장치 크기 또는 장치 유형을 찾는 데 도움 이 될 수 있습니다.

내가 작성한 라이브러리를 살펴보십시오 : https://github.com/tachyons-css/react-native-style-tachyons

rem시작시 root-fontSize ( ) 를 지정하여 사용자 PixelRatio또는 기타 장치 특성에 종속되도록 할 수 있습니다 .

그런 다음 remfontSize뿐만 아니라 패딩 등을 기준으로 스타일을 얻습니다 .

<Text style={[s.f5, s.pa2, s.tc]}>
     Something
</Text>

확장 :

• f5항상 기본 글꼴 크기입니다.
• pa2 기본 글꼴 크기에 상대적인 패딩을 제공합니다.

나는 단순히 나에게 잘 작동하는 화면 크기의 비율을 사용합니다.

const { width, height } = Dimensions.get('window');

// Use iPhone6 as base size which is 375 x 667
const baseWidth = 375;
const baseHeight = 667;

const scaleWidth = width / baseWidth;
const scaleHeight = height / baseHeight;
const scale = Math.min(scaleWidth, scaleHeight);

export const scaledSize =
    (size) => Math.ceil((size * scale));

테스트

const size = {
    small: scaledSize(25),
    oneThird: scaledSize(125),
    fullScreen: scaledSize(375),
};

console.log(size);

// iPhone 5s
{small: 22, oneThird: 107, fullScreen: 320}
// iPhone 6s
{small: 25, oneThird: 125, fullScreen: 375}
// iPhone 6s Plus
{small: 28, oneThird: 138, fullScreen: 414}

adjustsFontSizeToFit그리고 numberOfLines나를 위해 작동합니다. 긴 이메일을 한 줄로 조정합니다.

<View>
  <Text
    numberOfLines={1}
    adjustsFontSizeToFit
    style={{textAlign:'center',fontSize:30}}
  >
    {this.props.email}
  </Text>
</View>

나는 다음을 수행하여 이것을 극복했습니다.

1. 현재보기에 대해 원하는 글꼴 크기를 선택하십시오 (시뮬레이터에서 사용중인 현재 장치에 적합한 글꼴인지 확인하십시오).

2. import { Dimensions } from 'react-native' 다음과 같이 구성 요소 외부의 너비를 정의합니다. let width = Dimensions.get('window').width;

3. 이제 console.log (width)하고 적어 둡니다. 예를 들어보기 좋은 글꼴 크기가 15이고 너비가 360이면 360을 가져와 15로 나눕니다 (= 24). 이것은 다른 크기로 조정될 중요한 값이 될 것입니다.

   다음과 같이 스타일 개체에서이 번호를 사용합니다. textFontSize: { fontSize = width / 24 },...

이제 반응 형 fontSize가 생겼습니다.

플렉스 레이아웃을 사용하고 반응 형 글꼴 크기에 adjustsFontSizeToFit = {true}를 사용할 수 있으며 텍스트는 컨테이너의 크기에 따라 조정됩니다.

     <Text
    adjustsFontSizeToFit
    style={styles.valueField}>{value}
    </Text>

그러나 스타일에서는 fontsize를 입력해야 할 때만 adjustsFontSizeToFit 작업이 수행됩니다.

    valueField: {
    flex: 3,
    fontSize: 48,
    marginBottom: 5,
    color: '#00A398',
},

최근에이 문제가 발생하여 react-native-extended-stylesheet를 사용하게되었습니다.

rem화면 크기에 따라 값 및 추가 크기 조건을 설정할 수 있습니다 . 문서에 따라 :

// component
const styles = EStyleSheet.create({
  text: {
    fontSize: '1.5rem',
    marginHorizontal: '2rem'
  }
});
// app entry
let {height, width} = Dimensions.get('window');
EStyleSheet.build({
  $rem: width > 340 ? 18 : 16
});

를 사용하지 않는 이유 는 Android의 단위 PixelRatio.getPixelSizeForLayoutSize(/* size in dp */);와 동일 pd합니다.

import { Dimensions } from 'react-native';

const { width, fontScale } = Dimensions.get("window");

const styles = StyleSheet.create({
    fontSize: idleFontSize / fontScale,
});

fontScale장치에 따라 규모를 얻으십시오 .

이런 식으로 사용해야하는데 이걸 사용했는데 잘 작동합니다.

반응 네이티브 반응 화면 npm 설치 반응 네이티브 반응 화면-저장

1080x1920 장치가있는 것처럼

The vertical number we calculate from height **hp**
height:200
200/1920*100 = 10.41% - height:hp("10.41%")


The Horizontal number we calculate from width **wp**
width:200
200/1080*100 = 18.51% - Width:wp("18.51%")

모든 장치에서 작동합니다.

약간 다른 접근 방식이 저에게 효과적이었습니다.

const normalize = (size: number): number => {
  const scale = screenWidth / 320;
  const newSize = size * scale;
  let calculatedSize = Math.round(PixelRatio.roundToNearestPixel(newSize))

  if (PixelRatio.get() < 3)
    return calculatedSize - 0.5
  return calculatedSize
};

픽셀 비율 을 참조 하면 장치 밀도에 따라 기능을 더 잘 설정할 수 있습니다.

이와 같은 것을 사용할 수 있습니다.

var {height, width} = Dimensions.get ( 'window'); var textFontSize = 너비 * 0.03;

inputText: {
    color : TEXT_COLOR_PRIMARY,
    width: '80%',
    fontSize: textFontSize
}

타사 라이브러리를 설치하지 않고도 도움이되기를 바랍니다.