前言
- 最近對react-native產(chǎn)生些興趣，準(zhǔn)備學(xué)一學(xué)，寫寫demo練練手，然而之前對react頁不是很熟悉，所以一邊學(xué)一邊寫code，一邊看react-native的文檔一邊撘環(huán)境。中途還是遇到很多問題，寫篇文章mark下。
react-native搭建開發(fā)環(huán)境時(shí)遇到的問題
- 搭建Android開發(fā)環(huán)境：
- java版本不能裝9.0+的，路徑格式不同，Android-studio無法識別路徑。
- Android SDK 要裝25.0+的，不然會提示版本過低無法繼續(xù)，然而教程(甚至是fb官網(wǎng)上)還是寫的裝23.0
- 模擬器，先在Android-studio打開Android模擬器之后，再在命令行執(zhí)行react-native run-android命令
- 執(zhí)行react-native run-*命令時(shí)，啟動的packager server需要使用8081端口，確保這個(gè)端口沒有占用！
RN中寫樣式
- 本來平時(shí)我css就寫得少，RN中這種變種的css寫起來更蛋疼。。。。React-Native 樣式指南
- RN中的樣式相當(dāng)于css的縮減版，命名方式要用駝峰法，然后大部分屬性都能和css中對應(yīng)。布局：也有相對定位和絕對定位，也支持flex。官方推薦flex，可以解決大多數(shù)的布局情況。
- 建議使用StyleSheet.create()生成樣式的類名，也可以直接在組件上寫"內(nèi)聯(lián)"樣式。
- RN中元素的寬高是沒有單位的，直接用數(shù)字表示即可，也可以用flex來實(shí)現(xiàn)彈性寬高。
- 另外就是要注意，不同的組件可以設(shè)置的樣式是不同的，比如遇到無法設(shè)置寬高的組件就只能在它外層包個(gè)view，然后設(shè)置這個(gè)view的寬高。
RN中調(diào)試
- 打開調(diào)試菜單：iOS模擬器中：Command? + D 快捷鍵；Android模擬器對應(yīng)的則是Command? + M
- Enable Live Reload：開啟自動刷新
- Enable Hot Reload：開啟熱加載
- 訪問控制臺日志:在終端中運(yùn)行：react-native log-ios或者log-android
- 在開發(fā)者菜單中選擇"Debug JS Remotely"選項(xiàng)，即可以開始在Chrome中調(diào)試JavaScript代碼。點(diǎn)擊這個(gè)選項(xiàng)的同時(shí)會自動打開調(diào)試頁面 http://localhost:8081/debugger-ui.
- 注:Chrome中并不能直接看到App的用戶界面，而只能提供console的輸出，以及在sources項(xiàng)中斷點(diǎn)調(diào)試js腳本。
RN中的網(wǎng)絡(luò)通信
- 文檔上介紹的是使用fetch，我也專門去了解了一下下，算是ajax的進(jìn)化版，結(jié)合了一些html5的新特性。RN中也支持websocket。
- 默認(rèn)情況下，iOS會阻止所有非https的請求。如果你請求的接口是http協(xié)議，那么首先需要添加一個(gè)App Transport Security的例外，詳細(xì)可參考這篇帖子。
RN中的數(shù)據(jù)存儲
- 在瀏覽器環(huán)境，我們可以使用cookie、localstorage或者sessionstorage來實(shí)現(xiàn)數(shù)據(jù)緩存，在RN中則不能使用以上的三種方式。
- AsyncStorage是一個(gè)簡單的、異步的、持久化的Key-Value存儲系統(tǒng)，它對于App來說是全局性的。它用來代替LocalStorage。但是需要注意的時(shí)，RN這里的讀寫緩存操作全都是異步的和在瀏覽器中操作緩存有區(qū)別，然后我們使用時(shí)最好也是自己封裝一層DeviceStorage
