APP上線一段時間有用戶反應說不方便找東西，其實APP的數據不大也就三四百條而以，但受限于手機端展示區(qū)域太小、信息大爆炸，大家也基本上不會去記具體的名稱都是根據模糊的印象進行搜索而且現在大家基本都用拼音搜索經常輸不準確也很正常。所以之前通過關鍵詞查找的方法不行了，思來想去還是加個同音詞搜索吧！

由于比較懶所以基本上就想看看有沒有什么現成的解決方案最好是配幾個API就能搞定的，可以找了一圈沒發(fā)現什么“簡便”的方案，像ElectricSearch、Lucene之類的后端的方案雖然特別牛逼但是一想到還要配置服務器、集成API啥的腦袋都大。所以還是放棄了！

但在查找的過程中還是有收獲的，無意中發(fā)現PinyinLite這個項目，這項目太有愛了不僅包小（經過最終測試未壓縮版的bundle增加100K左右了）而且?guī)Я艘粋€模糊查的的示例因此很快就實現該功能了，具體實現方案如下：

1、在原有列表數據中針對要查找的標題增加一個拼音的字段，標題的中文轉拼音是在后端MySQL實現的，具體可以參考：Mysql中文漢字轉拼音的實現（每個漢字轉換全拼）。

[{
"title": "戳爆她們",
"titlePinyin": "chuo bao ta men "
......
}]

2、安裝PinyinLite及其依賴項

npm install pinyinlite --save
npm install lodash --save
npm install string_score ?--save

3、修改一下在React Native里的引用語法
import pinyinlite from 'pinyinlite';
import string_score from 'string_score';
import _ from? 'lodash';

4、根據參數進行查詢（key為輸入的中文，db.allGames為JSON數據反序列化之后的數組對像）

//將中文拼音數據按字符串輸出
var keyPinyin = pinyinlite(key).map(item => {
return item[0] }).join(' ');
//返回帶fuzzy匹配分值的數組
const scores = db.allGames.map(item => {
return {
data: item,
score: item.titlePinyin.score(keyPinyin)
};})

//篩選數組獲得結果，0.3為精度控制可以根據實際結果進行調整
result = scores.filter(i => i.score > 0.3).sort((a, b) => b.score - a.score).map(item => item.data);

運行結果示例：

總結：

開發(fā)過程中最大的震撼是 JS的庫實在是太豐富了，用簡單的方法實現同音詞搜索功能，最終使Bundle未壓縮前大了100K左右，執(zhí)行速度查詢大概是20毫秒以內，因此整個解決方案是可以接受的。當然可能也不是最優(yōu)的解決方案，歡迎留言或郵件cbcye#live.com批評指正！