2017-10-21 233 views
1

En hauteur de la ligne CSS peut être défini comme suithauteur de réglage de ligne multiplicateur dans React natif

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

Dans Android natif la même chose peut être défini comme

<TextView 
    lineSpacingMultiplier:'1.5' 
    ... 

Comment peut même être atteint dans Réagir Native. Les docs n'ont aucune information sur le multiplicateur de hauteur de ligne. La propriété lineHeight peut être utilisée pour définir uniquement les hauteurs de ligne absolues.

Toutes les informations sur les solutions de contournement ou comment personnaliser cette fonctionnalité vous seraient utiles.

Mon composant texte

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 
    } 
}) 

ici si parent_style contient un fontSize différent du fontSize par défaut , comment puis-je changer dynamiquement le lineHeight. Je suis incapable d'accéder parent_style.fontSize pour détecter si elle contient « fontSize » (parent_style peut être un objet ou un tableau)

Répondre

1

La plupart des exemples que j'ai rencontré définissent généralement une lineHeight en fonction de fontSize cette façon:

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

Vous pouvez ajuster n'importe quelle valeur pour le multiplicateur. La formule importante ici est lineHeight = fontSize + (fontSize * multiplier).

https://snack.expo.io/By_BJq_TW

+0

J'ai un composant personnalisé qui contient un élément '' . Donc, je ne saurais pas quelle sera la taille finale de fontSize. fontSize peut être remplacé par le parent. Le multiplicateur de hauteur de ligne doit donc changer dynamiquement en fonction de la taille de police finale. Comment cela fonctionnerait-il? – Anubhav

+0

En fonction de la hiérarchie de vos composants, vous pouvez accéder aux styles transmis par le composant parent. Voir https://snack.expo.io/r16QvqdT- –

+0

Vous êtes un épargnant de vie. Merci! Ce serait génial si vous pouviez inclure la technique 'StyleSheet.flatten' dans votre réponse. Serait utile pour les autres – Anubhav