Hochstellentext in React Native

Question

Ich möchte Text als hochgestellte in React Native formatieren. Wie würde dies erreicht werden? Gibt es eine Möglichkeit, die Javascript sup() String-Methode zu verwenden, um eine Zeichenfolge als hochgestellt innerhalb eines <Text> Objekts zurückzugeben?

Answer 1

Javascripts sub() Funktion umgibt nur Ihren Text mit <sub></sub> Tags und sie werden als Text in RN erkannt. Sie müssten Ihre eigene Funktion wie bauen:

export default class Test extends Component { 
    sub = (base, exponent) => { 
     return <View style={{flexDirection: 'row'}}> 
      <View style={{alignItems: 'flex-end'}}> 
       <Text style={{fontSize: 13}}>{base}</Text> 
      </View> 
      <View style={{alignItems: 'flex-start'}}> 
       <Text style={{fontSize: 10}}>{exponent}</Text> 
      </View> 
     </View> 
    } 

    render() { 
     return(
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> 
       <Text>{(() => 'hello'+'world'.sub())()}</Text> 
       {(() => this.sub('hello','world'))()} 
       {(() => this.sub('2','6'))()} 
      </View> 
     ); 
    } 
} 

Answer 2

Die beste Methode, die ich für dieses Problem nicht ideal gefunden ist, aber es funktioniert plattformübergreifend. Das Zeichen, das ich hochstellen musste, ist das ®, das einige Schriften standardmäßig hochgestellt haben. Also habe ich einfach eine ähnliche Schriftfamilie mit dem hochgestellten ® hinzugefügt und es funktionierte wie Magie.

Answer 3

Nur size, lineheight, textAlignVertical verwenden:

<Text style={{fontSize:20, lineHeight:22}}> 
    foo 
    <Text style={{fontSize:20 * 1.6, lineHeight:22 * 1.1, textAlignVertical: 'top'}}> 
    bar 
    </Text> 
</Text> 

Answer 4

Ich habe dies für mich arbeiten einen Blick Container und flex mit.

<View style={{flexDirection: 'row', alignItems: 'flex-start'}}> 
    <Text style={{fontSize: 20, lineHeight: 30}}>10</Text> 
    <Text style={{fontSize: 11, lineHeight: 18}}>am</Text> 
</View> 

Hier ist der Link zu dieser in Aktion https://repl.it/Haap/0

Prost!