React Native中的上标文本

Question

我想在React Native中将文本设置为上标。这将如何实现？有没有办法利用Javascript sup()字符串方法在<Text>对象中返回字符串作为上标？

Answer 1

我使用视图容器和flex为我工作。

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

以下是此行动https://repl.it/Haap/0

的链接

干杯！

Answer 2

只需使用fontSize，lineHeight，textAlignVertical：

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

Answer 3

我这样做是为了在我的案例中实现上标

 <View style={{ flexDirection: 'row' }}>
  <Text style={{ fontSize: 30 }}>e</Text>
  <Text style={{ fontSize: 10 }}>x</Text>
 </View>

Answer 4

Javascripts sub()函数仅使用<sub></sub>标记围绕您的文字，并且它们在RN中被识别为文本。您需要构建自己的函数，如：

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 5

我发现这个问题的最佳方法并不理想，但它可以跨平台工作。我需要上标的字符是某些字体默认上标的字母。所以，我只是将一个类似的字体系列与上标®一起包含在内，它就像魔法一样。