Question

在CSS中，行高可以设置如下

div {
    line-height: 20px; // absolute value
    line-height: 1.5; // multiplier
}

在原生Android中，同样可以设置为

<TextView
    lineSpacingMultiplier:'1.5'
    ...

如何在React Native中实现同样的目标。文档没有关于行高乘数的任何信息。 lineHeight属性只能用于设置绝对线高。

有关解决方法的任何信息或如何自定义添加此功能都会有所帮助。

我的文字组件

import React from 'react';
import {
    Text,
    StyleSheet
} from 'react-native';

const line_height_multiplier = 1.5
const default_font_size = 13

export default TextNode = ({style={}, children}) => {
    return(
        <Text style={[styles.text_style, parent_style]}>{children}</Text>
    )
}

const styles = StyleSheet.create({
    text_style: {
        fontFamily: 'OpenSans',
        fontSize: default_font_size,
        color: '#333',
        lineHeight: default_font_size * line_height_multiplier
    }
})

如果parent_style包含的fontSize与默认fontSize 13 不同，则如何动态更改lineHeight。我无法访问parent_style.fontSize来检测它是否包含'fontSize'（parent_style可以是对象或数组）

Answer 1

我遇到的大多数示例通常都会将lineHeight定义为fontSize的函数：

function lineHeight(fontSize) {
  const multiplier = (fontSize > 20) ? 1.5 : 1;
  return parseInt(fontSize + (fontSize * multiplier), 10);
}

您可以为乘数拟合任何值。

这里重要的公式是lineHeight = fontSize + (fontSize * multiplier)。

https://snack.expo.io/By_BJq_TW

Answer 2

为了获得更精确的结果，这个库和这个方法对你来说更好

https://github.com/aMarCruz/react-native-text-size#fontfromspecs

将行高设置为反应原生

2 个答案: