Question

您好我想替换<Text>内的字体样式，这个假设变量x是动态变量。

例如：

当x =＆＃34;地狱＆＃34; =＆GT;的地狱 OOOO
  当x =＆＃34;他＆＃34; =＆GT;的他 lloooo
  当x =＆＃34; lloooo＆＃34; =＆GT;他的 lloooo

我尝试使用此代码：

render() {
  var x = "Hell"; // Hell/He/lloooo
  var myOldString = "Helloooo";
  var reg = new RegExp(x, "g");
  var myNewString = myOldString.replace(reg, `<Text style={{fontWeight:'bold'}}>${x}</Text>`);
  return (
    <View>
      <Text>{myNewString}</Text>
    </View>
  );}

但结果只是一个普通的字符串：

   when x="Hell" => <Text style={{fontWeight:'bold'}}>Hell</Text>ooo
   when x="He" => <Text style={{fontWeight:'bold'}}>He</Text>llooo
   when x="lloooo" => He<Text style={{fontWeight:'bold'}}>lloooo</Text>

如何在<Text>内呈现字符串，以便嵌套<Text>，而不是普通的字符串？

Answer 1

这是一个看似简单的问题，在经过多次修修补补之后，我认为我有适合你的东西。

这可能不是最有效/优雅的方法，但在我测试它时它起作用了。

首先，您需要2个州值

constructor(props) {
    super(props);
    this.state = {
      textToBold:'ell',
      myArr:[],
    };
  };

一个用来保存对你试图加粗的部分的引用，另一个是在我们拆分字符串后保留一个数组。

接下来，使用此代码填写“myArr”值。所有这些都发生在componentWillMount

componentWillMount() {
    var reg = new RegExp(this.state.textToBold); //builds a RegExp from what you are trying to bold
    var myOldString = "Helloooo"
    var res = myOldString.split(reg); //splits the original string based on regex match
    this.setState({
        myArr: res //now you have an array of all remaining values
    })
  }

最后在你的渲染方法中，包括一种基于数组动态生成组件的方法。

 render() {
    let result = this.state.myArr.map((a, i) => {
      if ( i > 0) {
      return (
        <Text key={i}>
          <Text style={{ fontWeight:'bold'}}>{this.state.textToBold}</Text>{ a }
        </Text>
      )
    } else { //Case to accommodate for extra repeating values
      return (<Text key={i}>{ a }</Text>)
    }
    });

    return (
      <View style={styles.container}>
        <Text>
          { result }
        </Text>
     </View>
    )
 }

现在要“突出显示”您想要的任何文本，只需更改状态值'textToBold'。

Answer 2

我用Markdown

解决了这个问题

试试这段代码：

render() {
  var x = "Hell"; // Hell/He/lloooo
  var myOldString = "Helloooo";
  var reg = new RegExp(x, "g");
  var myNewString = myOldString.replace(reg, `**${x}**`);
  return (
    <View>
      <Markdown>{myNewString}</Markdown>
    </View>
  );}

替换标记<text>中的字体样式

2 个答案: