We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
最近参与了鹏友圈 2.16 社区视觉改版的功能开发,其中遇到一个奇怪的问题:
在个别机型下,Text 组件设置了 lineHeihgt 后,发现 numberOfLines 有显示问题,尾随出现了一行空行。复现机型有 iPhone 8 Plus、iPhone 11 Pro Max
Text
lineHeihgt
numberOfLines
一开始以为是 RN 中文网提及的 Text 嵌套导致的问题,查看后发现并不是同个问题。尝试搜了下 issue 列表,发现类似反馈和相关讨论:
#29298 - Text's numberOfLines doesn't work in iphone8P #21410 - [0.57] Text component rendering last line truncated
基本确定是相同问题,既然是因为 lineHeight 与 height 导致的,可以简单做个处理:当组件渲染之后,如发现高度不超过所有行高总高度的话,手动更改下组件高度。
lineHeight
height
自定义组件:
import React, { useState } from "react"; import { PixelRatio, StyleSheet, Text, TextProps } from 'react-native'; const AdaptableHeightText: React.FC<TextProps> = (props) => { const { children, numberOfLines = 0, style, } = props; const lineHeight = StyleSheet.flatten(style || {}).lineHeight || 0; const [contentHeight, setContentHeight] = useState(0); const handleLayout = (evt) => { const { height } = evt.nativeEvent.layout; if (height !== contentHeight && contentHeight === 0) { // 向上取整 const ceilH = Math.ceil(height); const targetH = numberOfLines * lineHeight; // 设置了 lineHeight & numberOfLines 时处理; // 有时 layout 的 height 还多了一行高度,这里取 min targetH > 0 && setContentHeight(Math.min(ceilH, targetH + 2 * PixelRatio.get())); } }; return ( <Text {...props} style={[style, contentHeight > 0 && { height: contentHeight } ]} onLayout={handleLayout} > {children} </Text> ) }; export default AdaptableHeightText;
The text was updated successfully, but these errors were encountered:
No branches or pull requests
背景
最近参与了鹏友圈 2.16 社区视觉改版的功能开发,其中遇到一个奇怪的问题:
一开始以为是 RN 中文网提及的
Text
嵌套导致的问题,查看后发现并不是同个问题。尝试搜了下 issue 列表,发现类似反馈和相关讨论:方案
基本确定是相同问题,既然是因为
lineHeight
与height
导致的,可以简单做个处理:当组件渲染之后,如发现高度不超过所有行高总高度的话,手动更改下组件高度。实践
自定义组件:
The text was updated successfully, but these errors were encountered: