React Native：在文本中查找子字符串，并以编程方式更改样式

Question

如果我在这里遗漏了一些标准，请原谅我，因为 React 不是我默认的 javascript 开发工具。这似乎应该很容易获得，所以我想我应该问。有没有可能，如果可以，我怎样才能找到一个 substring，然后在 React Native 中更改该 substring 的样式？

示例：

render() {
    return (
        <View>
            <Text>
                {this.state.myText}
            </Text>
        </View>
    );
}

componentDidMount() {
    setTimeout(() => {
        let newStr = this.state.myText.replace('green',  '<Text style={{ color: "green" }}>green</Text>');
        this.setState({ myText: newStr });
    },
    3000)
}

但很明显，您不能动态添加 Text 组件来以这种方式设置子字符串的样式。正确的方法是什么？

编辑：

我一直在研究这个问题，如果我没记错的话……我必须创建一个完整的子组件数组，跟踪子组件，然后动态地将文本组件添加/删除到这个数组中如果我只是想改变文本的颜色，用字符串？有人请告诉我 React 在这方面没有这个缺陷......

使用的最终代码：

render() {
    return (
        <View style={styles.container}>
          <Text>
            {this.state.textItems.map(item => (
              <Text style={{ color: item === 'green' ? 'green' : 'black' }}>{item}</Text>
            ))}
          </Text>
        </View>
    );
}

componentDidMount() {
    setTimeout(() => {
        this.setState({ textItems: this.state.textItems[0].split((/(green)/)) });
    },
    3000)
}

Answer 1

您可以定义一个包含字符串或对象的数组（如果您想更深入地自定义它，而不仅仅是颜色），然后将其映射到Text 组件的数组中。这是示例代码。

class Sample extends Component {
  // You can manipulate this items array, using setState
  state = {
    items: ['black', 'green', 'red']
  }

  render() {
    return (
      <Text>
        {textItems.map(item => (
          <Text style={{ color: item }}>{item}</Text>
        ))}
      </Text>
    );
  }
}

结果会是这样的

Answer 2

您应该通过使用样式来做到这一点。有很多方法，但这是一种：

constructor(){
  this.state = {color: "black", myText: "hello"};
}
render() {
    return (
        <View>
            <Text style={{color: this.state.color}}>
                {this.state.myText}
            </Text>
        </View>
    );
}

componentDidMount() {
    setTimeout(() => {
        this.setState({ color: "green" });
    },
    3000)
}