上一節(jié)講到了 react-native的開(kāi)發(fā)環(huán)境的配置,肩祥,這一節(jié)我門(mén)具體講講怎么看樣式后室,怎么調(diào)試
看樣式的話 有一個(gè) 神奇 react-native-developer tools(個(gè)人推薦,可選擇性的選擇用還是不用)
本包子 喜歡用真機(jī)調(diào)試混狠,岸霹,,我一般拿android機(jī)器調(diào)試将饺,贡避,因?yàn)閞eact-native在樣式方面 是IOS的親媽?zhuān)莂ndroid的后媽。沒(méi)毛病~
1.調(diào)試的話予弧,如果是simulator模擬器的話刮吧,一般是command + D 彈出菜單選項(xiàng),里面有一個(gè) inscpect 這個(gè)是檢查樣式的掖蛤。
如果是真機(jī)的話杀捻,你就使勁晃動(dòng)你的手機(jī)。就會(huì)出來(lái)菜單選項(xiàng)了
2.有一個(gè) remote debugger 這個(gè)將會(huì)自動(dòng)打開(kāi) 本地電腦的 谷歌瀏覽器坠七。這個(gè) 不能看樣式水醋,但是能看到 發(fā)送請(qǐng)求的log日志 在console 控制臺(tái)
你也可以去打斷點(diǎn)旗笔。這一整個(gè)項(xiàng)目做下來(lái),我發(fā)現(xiàn)沒(méi)有什么bug是打斷點(diǎn)解決不了的拄踪。蝇恶。。惶桐。撮弧。
但是 有時(shí)候,我們想去看看我們發(fā)送的請(qǐng)求可咋整姚糊,因?yàn)閚etwork里面沒(méi)有請(qǐng)求的日志贿衍,比較,react-native 不是H5.救恨。贸辈。。肠槽。
這個(gè)時(shí)候我們可以用抓包工具擎淤,charlse 茶壺,這個(gè)響當(dāng)當(dāng)?shù)淖グぞ呓障伞_@個(gè) 抓包工具的用法請(qǐng)自行百度
3.如果你在的電腦上更改了什么東西嘴拢,想要 實(shí)時(shí)更新在你的手機(jī)上。寂纪。 你會(huì)發(fā)現(xiàn) 有一個(gè)hot reloading 沒(méi)錯(cuò) 席吴,點(diǎn)擊他。捞蛋。然后孝冒,將你,當(dāng)前電腦連接的ip 輸入進(jìn)去襟交。
端口默認(rèn)是8081.迈倍。前提是你npm start 的時(shí)候沒(méi)有更改過(guò)端口號(hào)
然后 重新 在 reload 你的頁(yè)面。捣域。啼染。一般一切順利的話,焕梅,迹鹅,當(dāng)你 在 頁(yè)面上 改什么東西的話,贞言,就會(huì)在你的手機(jī)上顯示 hot reloading
BUT 大部分的時(shí)候不會(huì)這么順利斜棚。。〉苁矗可能出現(xiàn) 報(bào)錯(cuò)蚤霞。。义钉。一般其實(shí) 我們就照著 報(bào)錯(cuò)上面的提醒做就行(這一點(diǎn)蠻好的昧绣,報(bào)錯(cuò)的解決方法和原因都給你寫(xiě)里面了)
一般我的報(bào)錯(cuò) 解決方法就是 adb reverse tcp:8081 tcp:8081 這個(gè)命令行。捶闸。然后 仔重新 運(yùn)行一下環(huán)境就好了夜畴。記住啊,這個(gè)必須是 手機(jī)和 電腦在同一個(gè)局域網(wǎng)下/
總而言之删壮,這個(gè) 調(diào)試方法就是 command +D 或者 搖一搖贪绘。。央碟。税灌。
下一節(jié)江在react-native中樣式的寫(xiě)法和兼容的問(wèn)題