`react-native-render-html` 库导致文本在三星 s23 设备上被截断（也可能在其他一些 Android 设备上）

Question

我正在使用一个名为 react-native-render-html

 的库

在移动设备上呈现 HTML 内容。它在 iOS 和 Android 设备上运行良好，但三星 Galaxy S23 等少数设备的文本在末尾被截断。我在其他 Android 设备上尝试过同样的操作，并且所有文本都渲染到屏幕上时效果很好。

我不确定这是否是由于屏幕分辨率造成的。文本长度没有限制，我可以渲染比这更大的文本。

代码


const myStyles = StyleSheet.create<Styles>({

  ...
    messageText: {
    fontFamily: myFont,
    color: grey800,

    // NOTE: If I bump this to fontSize to 14.5 or more, then the text shows up without cutting it off which is strange. For some text it doesn't work

    fontSize: Platform.OS === 'android' ? 14.5 : 14,
    lineHeight: 20,
    flex: 1,
    fontWeight: 'normal',
    margin: 0,
    padding: 0,
  },
  ...

})

['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li'].forEach(tag => {
  tagsStyles[tag] = myStyles.text as MixedStyleDeclaration;
});


.....

  {text && (
    <HTML
     debug
     tagsStyles={tagsStyles}
     source={{
        html: text,
     }}
     contentWidth={containerWidth}
    />
  )}

当我增加字体大小时，它可以工作，但我不能仅仅依靠它。对于某些文本，使用字体

14.001

可以，但

会截断文本。对于其他一些文本，

14.5

有效，但

14.001

无效。

由于某些三星设备（例如 Galaxy S23）上的这种随机行为，我不确定什么字体大小是理想的。我检查了这个库的文档，但找不到答案。任何帮助将不胜感激。谢谢。

注意：文本“toilet”被截断，如屏幕截图所示。

Answer 1

经过一番研究，我找到了答案，所以将其发布在这里，这样如果有人遇到同样的情况可能会有所帮助。

问题出在字体大小上。如果我们对 fontSize 进行硬编码，那么这同样适用于所有设备。由于屏幕分辨率/像素比，某些设备可能需要更精细的数字。因此，在定义 fontSize 时，最好根据屏幕尺寸和像素比（像素比）缩放它们，这似乎是可选的，因为添加它时行为不会改变；但很高兴拥有它。

代码添加

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

  // Base dimensions (these are the dimensions you design for, e.g., 375x812 for iPhone X)

  const BASE_WIDTH = 375;
  const BASE_HEIGHT = 812;

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

  // Scale the font size

  const scale = (size: number) => {
    const scaleFactor = Math.min(width / BASE_WIDTH, height / BASE_HEIGHT);

    // return Math.round(size * scaleFactor); // if not considering pixelRatio

    const newSize = size * scaleFactor;
    return Math.round(PixelRatio.roundToNearestPixel(newSize));
  };

 
  // This part is now inside the react component (was declared outside earlier), but now it depends on the scale function defined inside the component. Can memoize this using `useMemo` if you feel the component re-renders a lot.

  ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'li'].forEach(tag => {
    tagsStyles[tag] = {
      ...ownStyles.messageText,
      fontSize: scale(14),
      lineHeight: scale(20), // better to add lineHeight as well 
    } as MixedStyleDeclaration;
  });

为什么这里需要添加参考设备

缩放一致性：这个想法是在不同设备上具有一致的缩放因子。通过将当前设备的屏幕尺寸（宽度和高度）与 BASE_WIDTH 和 BASE_HEIGHT 进行比较，您可以创建一个缩放因子，按比例调整 UI 元素，无论设备的屏幕尺寸如何，都保持相似的外观和感觉。
响应式设计：不同的设备具有不同的屏幕分辨率和宽高比。通过使用基线，您可以确保字体大小、填充和边距等元素按比例缩放。这有助于创建在较小和较大屏幕上看起来都不错的响应式设计。

`react-native-render-html` 库导致文本在三星 s23 设备上被截断（也可能在其他一些 Android 设备上）

问题描述投票：0回答：1

1个回答

最新问题

`react-native-render-html` 库导致文本在三星 s23 设备上被截断（也可能在其他一些 Android 设备上）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1