Javascript 如何在React Native中获取标记文本？

我有一个关于使用标记动态编写文本的问题。我不知道如何得到它，所以如果你能帮助我，它将是美好的。我知道有一些插件，当我可以得到一个完成这个效果，但我想学习一些新的东西，我不想使用插件到这个

因此，我有一个带有特定函数的

TextInput

，当我开始在这个输入中写东西时，会显示一个带有建议选项的过滤列表（看起来像

自动完成

），就是这样。当

TextInput

中的字母与列表选项建议中的字母匹配时，我希望使字体更粗体（或更改颜色等）。我尝试使用regex/replace，但它不能正常工作

为了说明我的问题：

输入文本：Al

列表中显示的文本：

阿拉巴马州
加利福尼亚
阿拉斯加

elements

是一个数组，其中有带状态名称的字符串（这只是一个示例）

const-mapData=elements.map（（text:string，i:number）=>{
const regexValue=new RegExp（inputValue，'g'）；
常量changeColor={inputValue}；
const showResult=text.replace（regexValue，changeColor）；
返回(
changeText（text，false）}
已禁用={isDisabled}
activeOpacity={1}>
{text}
{/*showResult*/}
);
});

你对我该怎么做有什么建议吗？

我想出来了

关于我所做的，有一段代码

  const mapData = elements.map((text: string, i: number) => {
  const hlStyles = {color: 'red', fontWeight: 'bold', fontSize: 20};

    return (
      <TouchableOpacity
        key={text + i}
        style={itemListStyle}
        onPress={() => changeText(text, false)}
        disabled={isDisabled}
        activeOpacity={1}>
        <Text
          style={StyleSheet.flatten([
            textItem,
            {textAlign: textAlignList},
            {...listElementsStyles},
          ])}>
          {hlText(text, inputValue, hlStyles)}
        </Text>
      </TouchableOpacity>
    );
  });

它正在发挥作用，所以这篇文章可能会帮助一些人

  const mapData = elements.map((text: string, i: number) => {
  const hlStyles = {color: 'red', fontWeight: 'bold', fontSize: 20};

    return (
      <TouchableOpacity
        key={text + i}
        style={itemListStyle}
        onPress={() => changeText(text, false)}
        disabled={isDisabled}
        activeOpacity={1}>
        <Text
          style={StyleSheet.flatten([
            textItem,
            {textAlign: textAlignList},
            {...listElementsStyles},
          ])}>
          {hlText(text, inputValue, hlStyles)}
        </Text>
      </TouchableOpacity>
    );
  });

   export const hlText = (text: string, value: string, ...styles: object) => {
      const index = text.toLowerCase().indexOf(value.toLowerCase().trim());

      const substringText = (index: number, endIndex: number) => {
        return text.substring(index, endIndex);
      };

      if (index > -1) {
        return [
          <Text key="text1">{substringText(0, index)}</Text>,
          <Text key="text2" style={styles}>
            {substringText(index, index + value.length)}
          </Text>,
          <Text key="text3">{substringText(index + value.length)}</Text>,
        ];
      }
    };