從HarmonyOS SDK根本上解決TextInput（輸入框）不識(shí)別飄紅的問(wèn)題
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
背景
在HarmonyOS中使用ets開(kāi)發(fā)的時(shí)候，大家會(huì)發(fā)現(xiàn)沒(méi)有輸入框組件，并且目前官網(wǎng)的api介紹上也沒(méi)有加入該組件，實(shí)際上該組件在本地的sdk目錄下是存在的，同時(shí)大家也可以在官方的codelab上找到該組件的使用，還有我發(fā)現(xiàn)之前有有人已經(jīng)關(guān)于如何加入輸入框組件寫(xiě)了篇博客，我就不過(guò)多介紹了。該組件就是TextInput，但是大家在使用它的時(shí)候都會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題，就是IDE會(huì)飄紅，但是能夠編譯通過(guò)并且可以在模擬器上正常運(yùn)行，如下圖：
那這個(gè)是為什么呢?如何能徹底解決該問(wèn)題呢?
其實(shí)我之前寫(xiě)過(guò)一篇博客解決的問(wèn)題跟這個(gè)類(lèi)似，請(qǐng)見(jiàn)“[https://harmonyos.51cto.com/posts/9536](如何解決HarmonyOS sdk的bug–AlphabetIndexer組件的bug解決思路)”
要徹底解決這個(gè)問(wèn)題，需要弄明白sdk目錄和DevEco Studio之間的關(guān)系。
解決思路
DevEco Studio中代碼為何會(huì)飄紅?
根本原因是我們引用的組件在Sdk中不存在，就相比于我們?cè)趈ava中引入一個(gè)class，而該class根本就不在jdk中.因此我們需要分析sdk中組件對(duì)應(yīng)是存在哪里?以及sdk中的組件是如何跟DevEco Studio關(guān)聯(lián)上的?
Sdk目錄結(jié)構(gòu)分析
這里我只對(duì)跟該問(wèn)題緊密相關(guān)的目錄進(jìn)行分析，首先我們可以在sdk下找到一個(gè)ets目錄，如下圖：
**api目錄：**里面存放了我們要調(diào)用的api接口的相關(guān)ts文件。比如網(wǎng)絡(luò)請(qǐng)求、撥打電話等api。該目錄與本問(wèn)題無(wú)關(guān)。
**build-tools目錄：**ets項(xiàng)目編譯構(gòu)建核心目錄，如果編譯無(wú)法通過(guò)，需要修改該目錄下的文件，在我之前的一篇博客中就修改了該目錄下的文件，請(qǐng)見(jiàn)“[https://harmonyos.51cto.com/posts/9536](如何解決HarmonyOS sdk的bug–AlphabetIndexer組件的bug解決思路)”。
**component目錄：**系統(tǒng)sdk自帶組件存放目錄，解決本問(wèn)題的核心目錄。
下面對(duì)component目錄展開(kāi)分析，打開(kāi)該目錄，可以看到各種UI組件對(duì)應(yīng)的ts文件，但是在其中我們并沒(méi)有發(fā)現(xiàn)TextInput組件對(duì)應(yīng)的ts文件。發(fā)現(xiàn)了這點(diǎn)，就會(huì)對(duì)解決該問(wèn)題有點(diǎn)頭緒了。
既然飄紅，找不到該組件，那么為何又會(huì)編譯通過(guò)正常運(yùn)行呢?
那么要對(duì)studio如何編譯構(gòu)建它有一定了解。
編譯的時(shí)候首先會(huì)通過(guò)讀取ets\3.0.0.0\build-tools\ets-loader下面的一個(gè)component_config.json文件，在這個(gè)里面對(duì)各個(gè)組件進(jìn)行配置關(guān)聯(lián)。然后會(huì)引用ets\3.0.0.0\build-tools\ets-loader\declarations目錄下的相關(guān)組件對(duì)應(yīng)的ts文件，該目錄下也存在各類(lèi)組件對(duì)應(yīng)的ts文件，注意在編譯的時(shí)候根本就不會(huì)引用之前的component目錄下的組件，編譯跟component目錄沒(méi)有關(guān)系。而我們會(huì)發(fā)現(xiàn)ets\3.0.0.0\build-tools\ets-loader\declarations目錄下存在textinput.d.ts文件及TextInput組件。
并且component_config.json文件中也配置了TextInput組件，因此可以通過(guò)編譯。
至于能正常運(yùn)行，那是因?yàn)槟M器中安裝的操作系統(tǒng)下有該組件的運(yùn)行環(huán)境。
最后解決飄紅的問(wèn)題
首先我們要想辦法找一個(gè)TextInput組件對(duì)應(yīng)存在的textinput.d.ts文件copy到component目錄下。
注意：這個(gè)時(shí)候不要復(fù)制ets\3.0.0.0\build-tools\ets-loader\declarations目錄下的textinput.d.ts文件，因?yàn)樗蚦omponent目錄下組件的代碼還是有些區(qū)別的。
好在我們可以在OpenHarmony Sdk目錄下的component目錄里面找到textinput.d.ts文件，直接copy這個(gè)文件過(guò)來(lái)即可。這個(gè)時(shí)候大家會(huì)認(rèn)為已經(jīng)大功告成，實(shí)則不然，此時(shí)我們會(huì)發(fā)現(xiàn)Studio中依然飄紅。
后來(lái)我反復(fù)研究各個(gè)目錄下的文件，又發(fā)現(xiàn)了一個(gè)重要文件，即component目錄下的index.d.ts文件，它相當(dāng)于一個(gè)入口的清單文件，在里面配置了各種系統(tǒng)組件的支持。代碼如下：
- /*
- * Copyright (c) 2021 Huawei Device Co., Ltd.
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
- export * from './alert_dialog';
- export * from './alphabet_indexer';
- export * from './animator';
- export * from './badge';
- export * from './blank';
- export * from './button';
- export * from './circle';
- export * from './column';
- export * from './column_split';
- export * from './common';
- export * from './custom_dialog_controller';
- export * from './datapanel';
- export * from './divider';
- export * from './ellipse';
- export * from './flex';
- export * from './forEach';
- export * from './gesture';
- export * from './grid';
- export * from './grid_container';
- export * from './gridItem';
- export * from './hyperlink';
- export * from './image';
- export * from './image_animator';
- export * from './lazyForEach';
- export * from './line';
- export * from './list';
- export * from './listItem';
- export * from './navigator';
- export * from './navigatorView';
- export * from './pageTransition';
- export * from './panel';
- export * from './path';
- export * from './polygon';
- export * from './polyline';
- export * from './progress';
- export * from './qrcode';
- export * from './rating';
- export * from './rect';
- export * from './row';
- export * from './row_split';
- export * from './scroll';
- export * from './shape';
- export * from './slider';
- export * from './span';
- export * from './stack';
- export * from './stateManagement';
- export * from './swiper';
- export * from './tab_content';
- export * from './tabs';
- export * from './text';
- export * from './video';
此時(shí)我們會(huì)發(fā)現(xiàn)里面并沒(méi)有配置textinput.d.ts文件進(jìn)來(lái)。于是我在該文件中添加下面一條代碼。
- export * from './textinput';
然后就大功告成了，DevEco Studio不飄紅了，并且可以通過(guò)Ctrl+鼠標(biāo)點(diǎn)擊跳轉(zhuǎn)代碼了。
想了解更多內(nèi)容，請(qǐng)?jiān)L問(wèn)：
51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)
