从 React Native 文本中删除垂直间距
P粉211600174
P粉211600174 2023-09-02 09:04:40
[CSS3讨论组]
<p>我制作了一个 CustomText 组件来使用 Poppins 字体系列。但是在使用它时,我得到了垂直空间,该空间最终会随着 fontsize 的增大而变大,从而在两个 CustomText 组件之间创建不必要的空间。</p> <p>我尝试使用 padding:0,margin:0,line-height:undefined | fontSize 但它们都不起作用。 这是我的 CustomText 代码:</p> <pre class="brush:js;toolbar:false;">const CustomText: React.FC&lt;CustomTextProps&gt; = ({ style, isBold, isItalic, fontSize, color, ...restProps }) =&gt; { fontSize ??= fontSizes.xsm; const combinedStyles = [ styles.defaultText, style, isBold &amp;&amp; styles.boldText, isItalic &amp;&amp; styles.italicText, { fontSize: fontSize }, { color: color ?? &quot;black&quot; }, ]; return &lt;Text style={combinedStyles} {...restProps} /&gt;; }; const styles = StyleSheet.create({ defaultText: { fontFamily: &quot;Poppins-Regular&quot;, }, boldText: { fontFamily: &quot;Poppins-Bold&quot;, }, italicText: { fontFamily: &quot;Poppins-Italic&quot;, }, }); </pre> <p>这是我使用示例图像时发生的情况的示例</p> <p>我使用backgroundColor:'green'来查看垂直空间,它太多了。</p> <p>我想控制文本元素之间的间距。我是反应本机的新手,任何帮助将不胜感激。谢谢</p>
P粉211600174
P粉211600174

全部回复(1)
P粉514001887

默认情况下,lineHeight 属性设置为字体大小的倍数。

您可以将 {lineHeight: fontSize}(或任何其他所需的数量)添加到 combinedStyles 中自行设置。

const combinedStyles = [
    styles.defaultText,
    style,
    isBold && styles.boldText,
    isItalic && styles.italicText,
    { fontSize: fontSize },
    { color: color ?? "black" },
    { lineHeight: fontSize },
  ];

还可以尝试单独设置 paddingToppaddingBottomma​​rginTopma​​rginBottom ,因为它们可能是在其他地方定义的覆盖一般的填充和边距。

还要设置includeFontPadding: false,因为可能有默认字体填充。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号