設置行高度，在反應過來本地

在CSS行高度可設定爲乘數如下設置行高度，在反應過來本地

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

在原生Android可以設置爲

<TextView 
    lineSpacingMultiplier:'1.5' 
    ...

如何同中能夠得到同樣的反應原生。文檔沒有任何有關行高度乘數的信息。 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可以是對象或數組）

來源

2017-10-21 Anubhav

我遇到平時最例子定義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

來源

2017-10-21 09:01:09

我有一個包含一個''元件的定製組件。所以我不知道最終的fontSize會是什麼。 fontSize可以被父級覆蓋。所以行高度乘數應該根據最終的fontSize動態改變。那會如何解決？ – Anubhav

根據您的組件層次結構，您可以訪問從父組件傳遞的樣式。見https://snack.expo.io/r16QvqdT- –

你是一個救星。謝謝！如果你可以在你的答案中包含'StyleSheet.flatten'技術會很好。會對其他人有幫助 – Anubhav

設置行高度，在反應過來本地

回答

相關問題