React Native：如何呈现“下标”？

Posted 2023-02-19

我需要创建一个具有挑战性的简单项目：

我需要在某些文本上实现“ 下标”（如果存在这样的词）。

原始文本如下所示，我需要在移动应用中添加相同的样式：

the quick brown fox jumps over    // <-- normal text
    +   - -   +  -  =             // <-- "underscripts", directly under specific letters

到目前为止，我只需要“下标”三个字符：+，-，=

我发现一个解决方案是将样式更改为a superscript or subscript。这是一个很好的方法，但是将其与确切的字母对齐时会出现问题。没有关于正负位置的模式。这些位置将根据我要编码的原始文本进行硬编码（或在配置文件中设置）。

是否有一些更简单的编程方式来做到这一点？

答案

根据@Guruparan Giritharan的建议，在此期间，我刚刚制作了一个自定义组件和样式。

我只是将+和-嵌入给定的字符串中。下标只是原始字符串的透明版本。如果它不是+和-，则使其透明。如果是，则进行可见打印。

function TextUnderScript( inputString ) 
  const underScripts = []
  var inputLength = inputString.length
  for (var i = 0; i < inputLength; i++) 
    if(inputString.charAt(i) === '+') 
      underScripts.push(  <Text style=styles.readFont>+</Text>  )
      i++
     else if(inputString.charAt(i) === '-') 
      underScripts.push(  <Text style=styles.readFont>-</Text>  )
      i++
     else if(inputString.charAt(i) === '=') 
      underScripts.push(  <Text style=styles.readFont>=</Text>  )
      i++
     else 
      underScripts.push(  <Text style=styles.readFontTransparent>inputString.charAt(i)</Text> )
    
  
...

source snack

（也可以将其标记为答案然后是xD）