React Native 作為能同時運行在Android 和 ios上的開發(fā)原生app的新技術烹困，現(xiàn)在已經(jīng)運用在很多應用中著角，我之前就一直在關注RN的新技術更新敲长，此次剛好跳槽凰锡，新東家采用了RN的技術來實現(xiàn)app，于是正式的第一次將RN應用于項目中文狱，在此記錄一下學習及開發(fā)RN的筆記坟募。
學習資料準備
作為一名Android開發(fā)，其實在學習RN之前辑鲤，我一直是使用Java開發(fā)的勇哗，而RN的語法規(guī)范使用的是ES6的，對于JS苏研，只存在大學時學過的基礎等浊，所以在此推薦兩篇學習資料：
1.《ES6標準入門》 阮一峰出品的語言入門書籍，基本滿足了開發(fā)RN的前置語法基礎摹蘑；
2.<a >《JSX語法講解》</a>
RN的布局書寫方式采用了JSX的語法糖實現(xiàn)筹燕，所以對于在RN中編寫APP布局的時候，熟悉JSX就顯得尤為重要了，推薦撒踪！
Flex布局屬性
在開發(fā)項目的過程中过咬，對于布局的屬性了解必不可少，而RN的布局屬性制妄，結(jié)合了css的特性掸绞，和原生的Android還是有很大的區(qū)別的，在此記錄一下：
屬性
- alignItems
- alignSelf
- justifyContent
- flexDirection
- flexWrap
| 名稱 | 值 |
| - | :-: | -: |
| alignItems | flex-start , flex-end , center , stretch |
| alignSelf | auto , flex-start , flex-end , center , stretch |
| justifyContent | flex-start , flex-end , center , space-between , space-around |
| flexDirection | row , column |
| flexWrap | wrap , nowrap |
基本掌握了以上布局的屬性忍捡，就能完成大部分的RN的界面布局了集漾，下面用一張圖講解一下每個屬性的意思，基本采用通俗易懂的方式
在RN中砸脊，布局的對齊方式是根據(jù)主軸具篇，副軸的方向制定的，而flexDirection的屬性就是指定主軸的凌埂，值為 row 驱显，則主軸為橫向的，副軸為縱向瞳抓，值為column埃疫，則主軸為縱向，副軸為橫向孩哑，默認值為column栓霜；
而ailgnItmes和justifyContent都是表示對齊方式的，justifyContent表示主軸上的對齊方式横蜒，ailgnItmes表示副軸上的對齊方式;
ailgnItmes和alignSelf有相同的功能胳蛮，不過不同點是它是用來讓每一個單行的容器居中而不是讓整個容器居中。
開發(fā)中的小坑總結(jié)（在此記錄避免以后再犯）
- 由于在開發(fā)之初丛晌，對ES6的語法還在一個熟悉階段仅炊，所以經(jīng)常會犯在{} 中編寫判斷語句，在此記錄澎蛛，{}中間只能用表達式
- 如果要跳轉(zhuǎn)的目標頁有TextInput抚垄，需要在最開始去掉焦點，不然在跳轉(zhuǎn)時會出現(xiàn)卡頓現(xiàn)象
- 對于IOS輸入鍵盤會遮擋頁面谋逻，可以用KeyboardAvoidingView來處理呆馁，指定屬性behavior={IOS ? "padding" : null}基本可以解決
...一時好多沒想起來，待更新毁兆。
后記
由于RN尚在Bate版智哀，還存在很多坑得，所以希望選型為RN開發(fā)時荧恍，需要考慮這些問題。
