时间戳

首页 > 解决方案 > minHeight 基于常量 numberOfLines - 'rem' 中的 fontSize

react-native - minHeight 基于常量 numberOfLines - 'rem' 中的 fontSize

问题描述

<View style={{minHeight: ??? }}> // <--- based on a constant maximum value of numberOfLines

    <Text style={{fontSize: '1rem'}}>{someShortOrLongText}<Text>

</View>

在一个<View />我想渲染一个<Text />有时是 1 行长，有时是 2 甚至 3 行长的。

因为它是<View />基于 {someShortOrLongText} 长度的调整大小。

我正在研究一种解决方案，以在任何渲染之前解析所有可能的文本并存储最大的行数（对于最坏的情况）。为了保持一致性，我想保留一个 minHeight 等于<Text />在这种情况下将占据的最大高度。

我可以强迫它更大，但我正在寻找一个完美的匹配，不浪费任何比实际 3 行（在这种情况下）占用的空间更多的空间。

rem如果我使用单位来实现这一点，有什么办法fontSize吗？

像这样的身高是好还是坏的做法：

<View style={{minHeight: '$constantEqualToFontSize * maxNumOfLines'}} />

标签： react-native

解决方案

如果您想根据文本大小呈现文本并将其放在视图中，这可以帮助您。

 return (
        <View style={{flex: 1}}>
           <View style={{
             borderRadius: 30,
             alignItems: 'center',
             justifyContent: 'center',
             backgroundColor: '#ffd5ab',
             padding: 15, maxWidth: 300
         }}>
                <Text style={{flexShrink: 1}}>
                   {someShortOrLongText}
                </Text>
           </View>
        </View>
 );

此处inner view将根据您输入的文本调整大小，您也可以将其定位inner view为absolute.

推荐阅读