时间戳

首页 > 解决方案 > React Native：如何渲染“下标”？

react-native - React Native：如何渲染“下标”？

问题描述

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

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

原文如下所示，我需要在移动应用中放入相同的样式：

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

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

我发现的一种解决方案是将样式更改为上标或下标。这是一个很好的方法，但是在将其与确切的字母对齐时会出现问题。没有关于加号和减号的位置的模式。这些位置将根据我尝试编码的原始文本进行硬编码（或在配置文件中设置）。

有没有一些更简单和程序化的方式来做到这一点？

标签： react-native

解决方案

正如@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> )
    }
  }
...
}

源小吃

（不妨将此标记为答案然后xD）

推荐阅读