Question

我最近开始研究本机响应，并且在应用程序中遇到了几个问题。我有一个标签需要传递文本，没关系。但是我不能让这段文字带有连字符，因为它专注于儿童。因此，我需要删除为标记自动生成的所有连字符。这里有人发生过这样的情况吗？谢谢大家！

<Text 
style={mixedGuideTextStyle}
font="madeWaffle">
"testetdgtsd sdfugkgfus wsefjkhksdhfsdh sjfkdhgdschsdk swedifuhskdichksh sdhcksdhjchds"
</Text>

Answer 1

如果我理解正确，则希望动态显示<Text>元素的文本内容，以便删除所有'-'字符。

一种简单的解决方案是将<Text>的文本内容呈现在表达式内（即通过{ }），然后在字符串上使用.replace()方法替换所有{{ 1}}个字符，带有一个空字符串，如下所示：

'-'

这将导致文本元素使用以下字符串内容呈现：

<Text style={mixedGuideTextStyle} font="madeWaffle"> { "testetdgtsd-sdfugkgfus-wsefjkhksdhfsdh".replace(/-/gi, '') } </Text>

Answer 2

您需要包括全局标志：

var str="185-51-671";
var newStr = str.replace(/-/g, "");

你也可以

str.split('-').join('');

这也应该起作用。

你很好！

Answer 3

您可以创建自己的组件，以应用@Akshay Mulgavkar指向的替换功能来完成该任务

function NoHyphensText({ children }) {
  return (
          <Text 
            style={mixedGuideTextStyle}
            font="madeWaffle">
              {children.replace(/-/gi, ' ')}
          </Text>
  );
}

然后像这样使用它

<NoHyphensText>Render-this-whithout-hyphens</NoHyphensText>

如何在React Native上的<Text>标签上删除文本的连字符？

3 个答案: