RN搜索高亮显示

将搜索关键词高亮显示是前端常遇到的功能，今天做个简要分享，代码如下：

  search = (text) => {
    let list = ['瓜子二手车', "我是瓜子二手车的车瓜子二手车", "二手车瓜子"];

    const list_ = list.map(item => {
      const ui = []
      const newArr = item.split(text)
      for (let i = 0; i < newArr.length; i++) {
        const v = newArr[i]

        if (i!== 0) {
          ui.push(<Text style={[y.color('red')]}>{text}</Text>)
        }

        ui.push(<Text>{v}</Text>)

      }
      return <View style={[y.udr]}>{ui}</View>
    })
    this.setState({
      result: list_
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22