我的 react-native 中的上标样式被破坏了? [英] Superscript style is broken in my react-native?

问题描述

我有以下反应原生代码.

I have the following react-native code.

<View style={styleOptions.container}>   
    <Text style={styleOptions.regular}>Hello world I am going to eat some Pizza for the sake of eating pizza. 
        <Text style={[{fontWeight:"bold"},styleOptions.strong]}>Super Pizza Store. </Text>
        You will pay $10
        <Text style={[{textAlignVertical:'top'},styleOptions.superscript]}>8</Text>
    .  I doubt you can afford it.
    </Text>
</View>

const styleOptions = {
    container:{flexDirection:"row",flexWrap:"wrap",width:300,padding:10},
    regular:{fontSize:13},
    superscript:{fontSize:8,lineHeight:22,textAlignVertical:'top',backgroundColor:'red',color:'white'},
    strong:{fontSize:13},
}

我的问题是我无法将上标(以红色突出显示)显示为上标.它似乎只保留作为下标.看图

My problem is that I can't get the superscript (highlighted in red) to appear as a superscript. It seems to only stay as a subscript. See image

如何在不破坏其他文本元素样式的情况下更改样式，使上标显示为上标?

How do I change my styles to make superscript appear as a superscript without breaking the styles of the other text elements?

这是基于我从这里学到的React Native 中的上标文本

This is based on what I learnt from here Superscript Text in React Native

编辑此外，该解决方案也必须适用于 iOS.现在，textAlignVertical 似乎对 iOS 没有任何作用，因为我听说它不受支持.

EDIT Also, the solution must work in iOS as well. Right now, textAlignVertical doesn't seem to do anything for iOS because I heard it's not supported.

推荐答案

Supplying lineHeight 到 nested Text 对 android 显示出不同的奇怪行为和 ios.

Supplying lineHeight to the nested Text shows weird behaviour differently for android and ios.

一个解决方法是制作一个单独的组件，这个上标包含的文本为

A workaround for this would be making a separate component this superscript contained Text as

<View style={styleOptions.container}>
                <Text style={styleOptions.regular}>Hello world I am going to eat some Pizza for the sake of eating pizza.
                    <Text style={[{fontWeight:"bold"},styleOptions.strong]}>Super Pizza Store. </Text>
                    You will pay
                    <View style={{flexDirection: 'row' , height: 13, width: 30}}>
                        <Text style={{fontSize: 13, lineHeight: 13}}> $10</Text>
                        <Text style={{fontSize: 8, lineHeight: 8}}>8</Text>
                    </View>
                    .  I doubt you can afford it.
                </Text>
            </View>


const styleOptions = {
  container:{flexDirection:"row",flexWrap:"wrap",width:300,padding:10},
  regular:{fontSize:13, lineHeight:22},
  strong:{fontSize:13},
}

这篇关于我的 react-native 中的上标样式被破坏了?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！