Question

我试图让上标（和下标）在我的Android和iOS上的React Native应用程序中工作。我知道在this SO question上建议使用<?php phpinfo(); ?>组件来解决上标问题。但这对我不起作用，因为您无法在Android的<?php ?>组件中嵌套View组件。
简而言之，我的代码如下：

View

我希望它输出 e ^x 。

我在任何地方都没有找到解决此问题的方法，但是我确信它是一个非常基本的功能，因此有可能。

有什么想法吗？

Answer 1

您可以通过在父级和子级文本组件之间调整fontSize和lineHeight来进行尝试。

 <Text style={{fontSize: 20, lineHeight: 30}}>
    e
    <Text style={{fontSize: 11,lineHeight: 24}}>
      x
    </Text>
 </Text>

Answer 2

我要这样做的方法是使用不同行高的Text来模拟上标和下标。

这是我发现的一个示例：https://reactnativecode.com/superscript-subscript-text/

我还没有亲自测试过，但是看起来可以使用。该代码粘贴在下面。

import { StyleSheet, Platform, View, Text } from 'react-native';

export default class Project extends Component{

  render() {

    return (

        <View style={styles.MainContainer}>

          <View style={{flexDirection: 'row'}}>

           <Text style={{fontSize: 20, lineHeight: 30, color: '#000'}}>A</Text>

           <Text style={{fontSize: 11, lineHeight: 18, color: '#000'}}>2</Text>

           <Text style={{fontSize: 20, lineHeight: 30, color: '#000'}}>+</Text>

           <Text style={{fontSize: 20, lineHeight: 30, color: '#000'}}>B</Text>

           <Text style={{fontSize: 11, lineHeight: 18, color: '#000'}}>2</Text>

          </View>


          <View style={{flexDirection: 'row'}}>

            <Text style={{fontSize: 20, lineHeight: 30, color: '#000'}}>H</Text>

            <Text style={{fontSize: 11, lineHeight: 37, color: '#000'}}>2</Text>

            <Text style={{fontSize: 20, lineHeight: 30, color: '#000'}}>S</Text>

            <Text style={{fontSize: 20, lineHeight: 30, color: '#000'}}>O</Text>

            <Text style={{fontSize: 11, lineHeight: 37, color: '#000'}}>4</Text>

          </View>

        </View>

    );
  }
}

const styles = StyleSheet.create({

 MainContainer :{

  flex:1,
  justifyContent: 'center',
  alignItems: 'center',
  paddingTop: (Platform.OS) === 'ios' ? 20 : 0,
  margin: 10

  }


});

Answer 3

也许您可以尝试将Unicode用于下标/上标。

例如：

<Text style={styles.superScript}>{"e" + "\u02e3"}</Text>

这将输出您想要的。我不知道您的用例到底是什么，但是您可以在将字符串提供给Text组件之前对其进行处理，并按照上例中的Unicode替换上标字符。

嵌套在Text组件中的Text组件中的上标（React Native）

3 个答案: