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

Javascriptsub()函数只会用<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>
        );
    }
}