【React Native】如何实现一个自动高亮的<Text>组件

这是我参与新手入门的第1篇文章。

难度 *

通过这篇文章熟悉创建React Native组件时的思路及步骤。

需求

离开去查看借阅状态

在一段文字中高亮显示某词，在React Native中需要嵌套组件，也就是如下实现：

	<Text>
		<Text style={{textDecorationLine:'underline'}}>
			离开
		</Text>
		去查看借阅状态
	</Text>
复制代码

这种写法在我看来可能叫做硬编码，不仅写的时候麻烦，而且放在实际业务中，也会使代码看起来比较凌乱。

编写

所以我们接下来会写一个组件代替这种写法。在编写组件之前，我会先想想我将如何使用这个组件。

//我的理想使用方式是这样的
<LighText 
	keys={['离开']} 
	lighStyle={{textDecorationLine:'underline'}}>
离开去查看借阅状态
</LighText>
复制代码

这个组件的实现方式是将一段文字通过关键词拆分开，分别用高亮及默认状态创建他们。

这段代码的思路是使用递归的思想，在一段字符串中寻找关键词，找到关键词后拆分，将段前，关键词，段尾加入数组，这样关键词会一直是偶数索引，默认文字是奇数索引。然后重复这个过程，直到找不到关键词为止，下面为实现代码：

/*
*将一段文字的重点部分单独用text标签包裹
*@return [] 数组偶数为高亮显示内容
*/
const markKeys = (title, keys) => {
        const split = (arr, keys) => {
            //接收字符串
            arr.forEach(item => {
                let arrs, key
                for (let index = 0; index < keys.length; index++) {
                    const word = keys[index]
                    if (item.indexOf(word) > -1) {
                        arrs = item.split(word)
                        key = word
                        break
                    }
                }
                if (!arrs) {
                    return false
                }
                //有多个关键词时，将会产生重复字符串
                let index = result.indexOf(item)
                if (index > -1) {
                    result.splice(index, 1)
                }
                //保留
                result.push(arrs[0])
                result.push(key)
                result.push(arrs[1])
                split(arrs, keys)
            })
        }
        let arr = [title] //接收到的字符串
        let result = []
        split(arr, keys)
        return result
    }
复制代码

本来想把组件的代码也写出来，后来发现这类的代码贴出来之后显得很啰嗦，所以就交给屏幕前的你们了~

总结

温故而知新，写完这篇文章下来，发现问题不少。写的这段代码虽然实现功能了，但是基本可以打0分。我的第N篇文章会对这段代码进行优化修改，到时候会把优化过程及思路贴出来。