Question

我有以下反应原生代码。

<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},
}

我的问题是我无法将上标（以红色突出显示）显示为上标。它似乎只作为下标。见图片

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

这是基于我从这里学到的Superscript Text in React Native

修改此外，该解决方案也必须在iOS中工作。现在，textAlignVertical似乎没有为iOS做任何事情，因为我听说它不受支持。

Answer 1

向lineHeight提供nested Text会显示android和ios的奇怪行为。

解决方法是将上标包含Text 作为

的单独组件

<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},
}

在我的反应本地打破了上标风格？

1 个答案: