Javascript 在react中有条件地设置每个字符的文本样式

我试图根据字符是否符合某些标准来更改字符的样式。给定共轭和根这两个参数，在文本元素中显示单词，字符按给定顺序以红色显示在底部。
例如，给定一组对象，如：

let exampleFakeWords = [
{
conjugation: "lavives",
root: "viv"
},
{
conjugation: "apepane",
root: "hipep"
},
{
conjugation: "mitpalelim",
root: "hitpalel"
}
]

在文本元素中为每个元素设置样式，如下所示：

<Text>la</Text><Text style={{color: red}}>viv</Text><Text>es</Text>
<Text>a</Text><Text style={{color: red}}>pep</Text><Text>ane</Text>
<Text>m</Text><Text style={{color: red}}>itpalel</Text><Text>im</Text>

lavives
阿佩潘
米帕利姆

到目前为止，我已经尝试了获取每个字符的字符代码，并尝试以这种方式设置它们的样式，但对于特殊情况，例如在单词的另一部分中发现一个基字母，这会把一切都搞糟。

从“React”导入React；
从“react native”导入{Text，StyleSheet}
函数getCharCodes（动词）{
var charCodes=verb.split（“”）.map（letter=>letter.charCodeAt（0））；
返回字符码；
}
常量get元音分配=（根代码、字符代码）=>{
var vouellocations=findLocationOfCharCodes（根代码、字符代码）
返回元音分配；
}
常量findLocationOfCharCodes=（感兴趣的代码、字符代码）=>{
var locationsOfCharCodes=[]；
interestedCodes.forEach（（interestedCode，i）=>{
if（感兴趣的代码类型==“编号”）{
var charCodeIndex=charCodes.indexOf（感兴趣的代码）；
if（i>charCodeIndex）{
charCodeIndex=charCodes.indexOf（感兴趣的代码，2）；
}
如果（charCodeIndex！=-1）
CharCodes.push的位置（charCodeIndex）；
}
})
返回位置字符代码；
}
常量格式化共轭=（共轭，元音分配）=>{
返回(
{
元音分配.map（（元音，i）=>{
如果（i==0）{
返回(
{共轭子串（0，元音）}
{共轭字符（元音）}
)
}else if（i==元音分配。长度-1）{
返回(
{共轭子串（元音配位[i-1]+1，元音）}
{共轭字符（元音）}
{共轭子串（元音+1，共轭长度）}
)
}否则{
返回(
{共轭子串（元音配位[i-1]+1，元音）}
{共轭字符（元音）}
)
}
})
}
)
}
常量共轭=（{共轭，字符码，根码}）=>{
var-gcharcode；
如果（！charCodes | | charCodes.length==0）{
gCharCodes=getCharCodes（共轭）
}否则{
gCharCodes=字符码；
}
var元音分配=Get元音分配（根代码、gCharCodes）；
报税表（
{格式化缀合（缀合，元音缀合）}
);
}
const styles=StyleSheet.create({
绿色：{颜色：'#20BF55'}，
蓝色：{颜色：'#0B4F6C'}
})
导出缺省共轭