react native字体大小自适应布局

user95

已于 2022-03-21 15:51:29 修改

阅读量3.9k

点赞数 4

分类专栏： react native 文章标签： react native javascript

于 2022-03-18 15:10:26 首次发布

本文链接：https://blog.csdn.net/c1024197824/article/details/123431293

版权

react native 专栏收录该内容

4 篇文章

订阅专栏

需求背景：

最近遇到一个问题，就是在FlatList中显示一行行抄表数据，每行的左侧文本是抄表时间，右侧文本是抄表值。抄表时间是固定格式、固定宽度的，但是右侧的抄表值是变长的，从个位数到8、9位数不等，值的结尾还显示单位，所以数据过长时会出现换行或是省略号显示的效果。

产品经理要求是抄表值一行显示不要换行，也不要显示省略号，完整显示。当抄表值过大在布局中显示不下时，则动态缩小字体大小，来适应布局宽度，在一行内完整显示抄表值。

实现效果如下：

下图demo中文本的宽度填充屏幕，点击按钮会动态追加文本。

限制一行显示效果：

一行内动态适应字体大小

限制两行显示效果：

两行内动态适应字体大小

上代码：

import React, { useState } from 'react';
import type { Node } from 'react';
import {
  Button,
  Platform,
  SafeAreaView,
  Text,
  NativeSyntheticEvent,
  TextLayoutEventData,
} from 'react-native';

import {
  Colors,
} from 'react-native/Libraries/NewAppScreen';

export interface AdjustTextProps {
  children: any;
  initFontSize: number;
  numberOfLines: number;
}

const AdjustText: () => Node = (props: AdjustTextProps) => {
  const {
    children, numberOfLines, initFontSize,
  } = props;
  const [currentFontSize, setCurrentFontSize] = useState(initFontSize);

  AdjustText.defaultProps = {
    numberOfLines: 1,
  };

  const onTextLayout = (e: NativeSyntheticEvent<TextLayoutEventData>) => {
    const { lines } = e.nativeEvent;
    if (lines.length > numberOfLines) {
      setCurrentFontSize(currentFontSize - 0.5);
    }
  };

  return (
      <Text
          {...props}
          style={[props?.style, { fontSize: currentFontSize }]}
          numberOfLines={numberOfLines}
          adjustsFontSizeToFit={Platform.OS === 'ios'}
          onTextLayout={Platform.OS === 'ios' ? null : onTextLayout}
      >
        {children}
      </Text>
  );
};

const App: () => Node = () => {
  const [text, setText] = useState('Hello World.');

  return (
      <SafeAreaView style={{ height: '100%', justifyContent: 'center', backgroundColor: Colors.darker }}>
        <AdjustText
            initFontSize={20}
            numberOfLines={1}
            style={{ color: 'black', backgroundColor: 'pink', marginBottom: 20 }}
        >
          {text}
        </AdjustText>
        <Button
            title={'Append Text'}
            onPress={() => setText(`${text} Hello World.`)}
        />
      </SafeAreaView>
  );
};

export default App;