Android용 React Native 뷰에 맞게 글꼴 크기를 조정하는 방법

Android용 React Native 뷰에 맞게 글꼴 크기를 조정하는 방법

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

길이가 다른 텍스트가 있는데, 일부 텍스트가 보기에 맞지 않아 글꼴 크기를 줄였습니다.문서를 확인해보니 iOS 전용으로 안드로이드용으로 필요합니다.

버튼이나 터치 가능한 불투명도 등 다른 컴포넌트와 함께 사용할 수 있습니까?

Jeffy Lee 코드가 조금 개선되었습니다.

const AdjustLabel = ({
  fontSize, text, style, numberOfLines
}) => {
  const [currentFont, setCurrentFont] = useState(fontSize);

  return (
    <Text
      numberOfLines={ numberOfLines }
      adjustsFontSizeToFit
      style={ [style, { fontSize: currentFont }] }
      onTextLayout={ (e) => {
        const { lines } = e.nativeEvent;
        if (lines.length > numberOfLines) {
          setCurrentFont(currentFont - 1);
        }
      } }
    >
      { text }
    </Text>
  );
};

Android와 iOS에서 작동하는 이 두 가지 소품을 결합합니다.

adjustsFontSizeToFit={true}
numberOfLines={1}

adjustsFontSizeToFit은 글꼴이 컨테이너를 초과하지 않도록 하고 numberOfLines는 텍스트를 한 줄로 유지합니다.

adjusts가 없는 numberOfLinesFontSizeToFit은 생략부호를 만들고 numberOfLines가 없는 adjustsFontSizeToFit은 포함 뷰에 고정 높이 또는 너비가 있는 경우 포함 뷰에 들어가는 텍스트 크기의 높이를 줄입니다.

이 방법을 시도해 보세요.화면 폭에 따라 다음과 같이 글꼴 크기를 설정하는 것을 고려하십시오.

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

그래서 당신의 스타일은 폰트 크기를 화면에 맞도록 백분율 계산을 시도합니다.

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

모든 화면(Android와 IOS 모두)에서 동작합니다.

이 방법을 사용해 보세요.

이를 위해 onLayout 메서드를 사용했습니다.

먼저 텍스트 뷰를 고정 크기 뷰로 감은 후 두 뷰 모두에 대해 onLayout을 구현하여 고정 크기 뷰의 높이와 텍스트 뷰의 높이를 가져옵니다.

다음으로 텍스트 보기의 필요한 높이가 보기 높이보다 클 경우 높이가 보기에 맞을 때까지 텍스트 보기의 글꼴 크기를 줄입니다.

테스트 코드에서는, 2개의 뷰를 작성했습니다.하나는 분홍색, 다른 하나는 노란색 배경입니다.핑크 표시 내의 텍스트의 글꼴 사이즈는 보기에 맞게 조정되며 노란색 텍스트는 동일한 글꼴 크기로 유지됩니다.

import React, { useState, useEffect } from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  const [size, setSize] = useState(20)
  const [viewHeight, setViewHeight] = useState(0)
  const [textHeight, setTextHeight] = useState(0)

  useEffect(() => {
    if (textHeight > viewHeight) {
      setSize(size - 1) // <<< You may adjust value 1 to a smaller value so the text can be shrink more precisely
    }
  }, [textHeight])

  return (
    <View style={styles.container}>
      <View
        style={{
          margin: 20,
          backgroundColor: 'pink',
          width: 200,
          height: 200
        }}
        onLayout={(event) => {
          var { x, y, width, height } = event.nativeEvent.layout;
          setViewHeight(height)
        }}
      >
        <Text
          style={{
            fontSize: size,
          }}
          onLayout={(event) => {
            var { x, y, width, height } = event.nativeEvent.layout;
            setTextHeight(height)
          }}
        >
          Gemma is a middle grade novel that follows a curious explorer and her ring-tailed lemur, Milo, 
          as they hunt for the “most greatest treasure in the world”. Solving riddles, battling a bell-wearing 
          jaguar, and traveling the Eight Seas, Gemma’s adventures take her from a young girl to a brave captain, 
          whose only limits are the stars.
        </Text>
      </View>

      <View
        style={{
          margin: 20,
          backgroundColor: 'yellow',
          width: 200,
          height: 200
        }}
      >
        <Text
          style={{
            fontSize: 20
          }}
        >
          Gemma is a middle grade novel that follows a curious explorer and her ring-tailed lemur, Milo, 
          as they hunt for the “most greatest treasure in the world”. Solving riddles, battling a bell-wearing 
          jaguar, and traveling the Eight Seas, Gemma’s adventures take her from a young girl to a brave captain, 
          whose only limits are the stars.
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

폰트 사이즈가 작아지고 있을 때, 핑크 텍스트의 폰트가 축소 애니메이션이 되어 있는 것을 알 수 있습니다.글꼴 조정 종료 후에 사용자가 보기 어려운 애니메이션을 볼 수 있도록 텍스트 불투명도를 0으로 초기화하고 1로 설정할 것을 권장합니다.

편집

나는 최근에 더 어려운 일에 직면했다.이 작업은 길이가 다른 여러 단어를 동일한 크기의 보기(예: 평면과 트럭 모두 문자 수는 동일하지만 같은 글꼴 크기로 쓰면 트럭이 평면보다 깁니다)에 맞추는 것이었습니다.리액트 네이티브 애니메이션 라이브러리를 사용하여 이 작업을 수행했습니다.입력 단어 -> 비행기, 트럭, 버스, 자동차, 택시

1. 텍스트 구성 요소를 사용하여 가장 긴 단어에 필요한 너비를 초과하는 글꼴 크기를 가진 모든 단어를 렌더링합니다.
2. 텍스트 컴포넌트의 onLayout 기능을 사용하여 가장 긴 단어의 너비와 높이(이미 비슷한 높이)를 찾았습니다.
3. 고정 뷰 내에서 가장 큰 단어를 적합시키는 데 필요한 X축과 Y축을 따라 축척 계수(1단계에서 가정했기 때문에 1 미만)를 계산하고 그 중 최소값을 취했습니다.
4. 그런 다음 텍스트에 딱 맞는 보기 구성요소로 둘러싸인 텍스트 구성요소(같은 글꼴 크기)에 각 단어를 렌더링하고 변환 받침대를 사용하여 각 보기를 동일한 축척 비율로 배율 조정했습니다.

알고리즘 실행 시 어떤 트릭으로 숨겨도 사용자가 View using onLayout을 볼 수 있을 때까지 폰트 크기를 지속적으로 줄였기 때문에 위와 같은 아이디어를 구현했습니다.https://www.npmjs.com/package/@chamodanethra/syslog-fitted-text의 npm 패키지를 공개했습니다.

리액트 네이티브 앱에서 보기 크기 변경 텍스트 수(현재 30자 이내로 입력 필드에 문자열을 입력)에 대해서도 비슷한 문제가 있었습니다.으로 이미 되어 있는 이 몇 을 알게 되었습니다.iOS 는 、 os 、 os 、 osos 、 i i 。adjustsFontSizeToFit minimumFontScale={.4}하지만 안드로이드에는 현재 그러한 방법이 없습니다.

주의: 최적의 솔루션은 아니지만 나에게 적합한 솔루션입니다.

현재 중첩된 3진 연산자를 사용하고 있습니다.

fontSize: this.props.driverName.length > 12 && 
this.props.driverName.length < 20 ? heightPercentageToDP('2%') : 
this.props.driverName.length > 20 && this.props.driverName.length < 40 
? heightPercentageToDP('1.75%') : heightPercentageToDP('2.25%')

일반인의 표현으로는 위의 3진법이 사용된 문자의 범위를 확인하고 범위를 기준으로 뷰 내에서 글꼴 크기를 '%'로 변경합니다.: 법: :heightPercentageToDP모바일 화면의 DP를 기반으로 크기를 '%'로 변환하기 위해 사용하는 기능입니다(태블릿이나 휴대폰에서 응답합니다).

high Percentage ToDP 코드 조각:

    import { Dimensions, PixelRatio } from "react-native";
    const widthPercentageToDP = widthPercent => {
    const screenWidth = Dimensions.get("window").width;
    // Convert string input to decimal number
    const elemWidth = parseFloat(widthPercent);
    return PixelRatio.roundToNearestPixel((screenWidth * elemWidth) / 100);
    };
    const heightPercentageToDP = heightPercent => {
    const screenHeight = Dimensions.get("window").height;
    // Convert string input to decimal number
    const elemHeight = parseFloat(heightPercent);
    return PixelRatio.roundToNearestPixel((screenHeight * elemHeight) / 100);
    };
    export { widthPercentageToDP, heightPercentageToDP };

highPercentageToDP 크레딧 및 소스는 https://medium.com/react-native-training/build-responsive-react-native-views-for-any-device-and-support-orientation-change-1c8beba5bc23로 보내집니다.

번거로움 없이 각 디바이스의 글꼴 축척을 유지할 수 있는 작은 라이브러리를 사용할 수 있습니다.

npm i --save react-native-responsive-fontsize

"react-native-response-fontsize"에서 RF를 Import

폰트 사이즈: RF (2)

그러나 텍스트에 allowFontScaling={false}개의 소품을 추가하는 것을 잊지 마십시오.ios에는 자동 폰 스케일링 기능이 있기 때문에 글꼴 크기가 예상과 다를 수 있습니다.

빠른 답변 사용 텍스트 속성이 FontSizeToFit을 조정합니다.

텍스트 컴포넌트adjustsFontSizeToFitProp는 React Native 0.62 이후 Android용으로 지원되고 있습니다.문서를 확인합니다.

언급URL : https://stackoverflow.com/questions/48001774/how-to-adjust-font-size-to-fit-view-in-react-native-for-android