在本机反应中将行高设置为乘数

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 13fontSize不同的字体，我如何动态更改. 我无法访问检测它是否包含“fontSize”（可以是对象或数组）lineHeightparent_style.fontSizeparent_style

Answer 1

我遇到的大多数示例通常将 a 定义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