Jak symulować "wyrównanie elementów: linia bazowa" w React Native?

Question

Ponieważ w implementacji Flexbox przez RN nie ma pozycji "align-items: baseline", w jaki sposób mogę wyrównać linie bazowe dwóch elementów tekstowych w poziomie?

JSX:

<View style={styles.numberAndPercent}> 
    <Text style={styles.number}>6.80</Text> 
    <Text style={styles.percent}>%</Text> 
</View> 

Answer 1

React Native obsługuje teraz alignItems: 'baseline', więc następujące powinny działać:

numberAndPercent: { 
    flexDirection: 'row', 
    alignItems: 'baseline', 
} 

Więcej informacji: https://facebook.github.io/react-native/docs/flexbox.html

Answer 2

Spróbuj:

{ 
    numberAndPercent: { 
    flex: 1, 
    justifyContent: 'flex-end' 
    } 
} 

A dodatkowo:

{ 
    number: { 
    alignSelf: 'flex-end' 
    }, 

    percent: { 
    alignSelf: 'flex-end' 
    } 
} 

Answer 3

Obecnie React Native obsługuje każdą własność schematu flexbox wyjątkiem linia bazowa. Aby obejść ten problem, możesz ustawić wysokość tak, aby była taka sama jak rozmiar czcionki.

 
textBig: { 
    fontSize: 40, 
    height: 40, 
} 
textSmall: { 
    fontSize: 18, 
    height: 18, 
} 

To nie jest idealne rozwiązanie, ale na razie wykonuje swoją pracę.

Answer 4

<Text style={styles.numberAndPercent}> 
    <Text style={styles.number}>6.80</Text> 
    <Text style={styles.percent}>%</Text> 
</Text> 

Answer 5

Spróbuj

{ fontSize: 40, lineHeight: 40 * 0.75, paddingTop: 40 - (35 * 0.75), // <-- Add this },