React Native 中遇到的問題

首先，我在React Native的安裝和運(yùn)行中出現(xiàn)了層出不窮的錯(cuò)誤炼彪，一度刷新我的心理承受能力吐根。為此，我特寫此篇文章以減少和我一樣遭受這些錯(cuò)誤折磨的朋友們辐马。
以下為我在React Native在從安裝到運(yùn)行代碼的過程中拷橘，總結(jié)的所有的問題以及解決的方法。

一齐疙、環(huán)境搭建中遇到的錯(cuò)誤

1.首先膜楷，React Native的環(huán)境搭建包括以下環(huán)境：

JDK
Python2
Node.js
yarn、npm
Android Studio（這個(gè)主要在于SDK的配置）
當(dāng)然以上的環(huán)境搭建還需要環(huán)境變量的配置贞奋，這個(gè)大家可以從百度上搜索下赌厅，在此我就不細(xì)講了。
以下我附上了React Native官方搭建開發(fā)環(huán)境的鏈接供大家參考
React Native官方搭建開發(fā)環(huán)境
當(dāng)然除環(huán)境搭建以外轿塔，還需要夜神模擬器來預(yù)覽你的項(xiàng)目

2.接下來就是我所環(huán)境搭建中所遇到的錯(cuò)誤

環(huán)境搭建好的朋友特愿，就在命令窗口輸入以下命令：

react-native init hello --version 0.55.4 創(chuàng)建項(xiàng)目

cd hello 進(jìn)入項(xiàng)目

adb connect 127.0.0.1:62001 連接夜神模擬器

react-native run-android 運(yùn)行項(xiàng)目

app：installDebug

這個(gè)錯(cuò)誤是在運(yùn)行項(xiàng)目中出現(xiàn)的，提示的Bug是"app：installDebug",主要原因在于gradle勾缭。

解決方法：
1）.通過Android Studio打開react-native中的android工程

2）.打開后會(huì)發(fā)現(xiàn)Gradle報(bào)錯(cuò)揍障，按照報(bào)錯(cuò)信息完成修改即可

這個(gè)錯(cuò)誤是Ndoe.js還沒有搭建好

index.android.bundle

解決方法：
（以下均在命令窗口上運(yùn)行）
1）創(chuàng)建缺失的目錄：mkdir android\app\src\main\assets

2）在創(chuàng)建好的目錄添加程序需要的文件：react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3）：react-native run-android

二、夜神模擬器中出現(xiàn)的錯(cuò)誤

這個(gè)錯(cuò)誤是模擬器沒有連接上服務(wù)器俩由，即網(wǎng)絡(luò)地址不對

解決方法：
1）重新修改網(wǎng)絡(luò)地址

2）網(wǎng)絡(luò)地址在命令窗口輸入ipconfig查詢

3）輸入網(wǎng)絡(luò)地址：8081

4）重新刷新

這個(gè)錯(cuò)誤是找不到有效的屬性的style毒嫡，一般在代碼中你設(shè)置的某個(gè)屬性的style，但沒有對這個(gè)style進(jìn)行修飾

解決方法：
對style進(jìn)行修飾

這個(gè)錯(cuò)誤是react native的代碼只接受.jpeg或.png格式的圖片幻梯，而我的代碼中是.jpg格式的圖片

解決方法：將圖片改成.jpeg或.png格式
500錯(cuò)誤一般都是代碼中的輸入錯(cuò)誤兜畸，出現(xiàn)此錯(cuò)誤的時(shí)候就應(yīng)該好好檢查代碼，是否某處代碼有錯(cuò)誤

三碘梢、在一個(gè)項(xiàng)目中運(yùn)行不同頁面

修改相應(yīng)的js名及js的類名即可

四咬摇、React Native調(diào)試

1、調(diào)試方法

1）在夜神模擬器點(diǎn)擊菜單欄煞躬，點(diǎn)擊“Debug JS Remotely”
2）點(diǎn)擊后Chorme跳出"http://localhost:8081/debugger-ui"頁面

3）打開Chrome菜單->選擇更多工具->選擇開發(fā)者工具

2肛鹏、Sources面板

Sources面板提供了調(diào)試 JavaScript 代碼的功能

Sources面板可以讓你看到你所要檢查的頁面的所有腳本代碼逸邦，并在面板選擇欄下方提供了一組標(biāo)準(zhǔn)控件，提供了暫停在扰，恢復(fù)缕减，步進(jìn)等功能。在窗口的最下方的按鈕可以在遇到異常(exception)時(shí)強(qiáng)制暫停健田。源碼顯示在單獨(dú)的標(biāo)簽頁烛卧，通過點(diǎn)擊打開文件導(dǎo)航面板佛纫，導(dǎo)航欄中會(huì)顯示所有已打開的腳本文件

Chrome開發(fā)著工具中的Sources面板幾乎是最常用的功能面板妓局。通常只要是開發(fā)遇到了js報(bào)錯(cuò)或者其他代碼問題，在審視一遍自己的代碼而一無所獲之后呈宇，首先就會(huì)打開Sources進(jìn)行js斷點(diǎn)調(diào)試

執(zhí)行控制工具

從上圖可以看到’執(zhí)行控制工具’按鈕在側(cè)板頂部好爬，讓你可以按步執(zhí)行代碼，當(dāng)你進(jìn)行調(diào)試的時(shí)候這幾個(gè)按鈕非常有用：

繼續(xù)(Continue): 繼續(xù)執(zhí)行代碼直到遇到下一個(gè)斷點(diǎn)
單步執(zhí)行(Step over): 步進(jìn)代碼以查看每一行代碼對變量作出的操作甥啄，當(dāng)代碼調(diào)用另一個(gè)函數(shù)時(shí)不會(huì)進(jìn)入這個(gè)函數(shù)存炮，使你可以專注于當(dāng)前的函數(shù)
跳入(Step into): 與 Step over 類似，但是當(dāng)代碼調(diào)用函數(shù)時(shí)蜈漓，調(diào)試器會(huì)進(jìn)去這個(gè)函數(shù)并跳轉(zhuǎn)到函數(shù)的第一行
跳出(Step out): 當(dāng)你進(jìn)入一個(gè)函數(shù)后穆桂，你可以點(diǎn)擊 Step out 執(zhí)行函數(shù)余下的代碼并跳出該函數(shù)
斷點(diǎn)切換(Toggle breakpoints): 控制斷點(diǎn)的開啟和關(guān)閉，同時(shí)保持?jǐn)帱c(diǎn)完好

查看js文件

如果你想在開發(fā)者工具上預(yù)覽你的js文件融虽，可以在打開Sources tab下的debuggerWorker.js選項(xiàng)卡享完，該選項(xiàng)卡下會(huì)顯示當(dāng)前調(diào)試項(xiàng)目的所有js文件，或者是用快捷鍵 cmd + o 調(diào)出文件搜索直接進(jìn)行搜索有额，這個(gè)更加便捷高效

斷點(diǎn)

在 Sources 面板的文件導(dǎo)航面板中打開一個(gè)JavaScript文件來調(diào)試般又，點(diǎn)擊邊欄(line gutter) 為當(dāng)前行設(shè)置一個(gè)斷點(diǎn)，已經(jīng)設(shè)置的斷點(diǎn)處會(huì)有一個(gè)藍(lán)色的標(biāo)簽巍佑，單擊藍(lán)色標(biāo)簽茴迁，斷點(diǎn)即被移除
右鍵點(diǎn)擊藍(lán)色標(biāo)簽會(huì)打開一個(gè)菜單，菜單包含以下選項(xiàng)：執(zhí)行到此(Continue to Here)萤衰，黑盒腳本(Blackbox scripts)堕义，移除斷點(diǎn)(Remove Breakpoint)，編輯斷點(diǎn)(Edit Breakpoint)脆栋，和禁用斷點(diǎn)(Disable Breakpoint)倦卖。在這里你可以對斷點(diǎn)進(jìn)行更高級(jí)的操作