react-native 開發筆記（一）

react-native 開發筆記

開始使用react-native開發產品，講講今天遇到的坑

TabBarIos的使用

通常app的設計都是主頁是一個tab頁面，咱們的app產品也是不例外的，因此我使用了這個iOS專用的組件(先搞定ios，再考慮兼容性)

遇到的問題

1. 圖標大小適配問題
   由於設計給出來的設計稿的2X，因此切出來的圖都是2倍的，這就致使圖標很大，翻遍文檔，只找到一個{{uri: base64Icon, scale: 2}}這樣子的配置，可是本地圖片，總不能先手動轉換成base64字符串再用吧。找來找去，在Image組件裏面看到，圖片適配方案，若是把圖片保存爲xx@2x.png,是否是也能夠在icon裏面使用？結果是使人欣慰的。

2. active顏色問題
   這個不算問題了，算是優點。通常作web開發，若是不是圖標字體的話，咱們會爲圖片的選中和不選中準備兩張圖片作切換。在react-native裏面不須要這麼複雜，只須要準備一張圖片，經過配置就能夠解決了

   unselectedTintColor="#929292"
   tintColor="#007aff"
   barTintColor="#f7f7f7"

Navigator的使用

我使用的react-native的版本是0.44，這個版本里面移除了Navigator這個組件，因此在非正式版本里面出現問題，須要優先查看是否是版本問題致使的。不過幸虧的是，react-natie提示作的很好，原來它們把Navigator移到了react-native-deprecated-custom-components這個單獨的包裏，安裝引用一下就行了

flexbox的使用

若是你把一個View設置flex:1，它默認會佔滿剩下的垂直空間。這可能會致使開發者很困惑，怎麼高度和我想的不一致呢？那隻要把剩餘的View高度都設置準確，這些都會迎刃而解。
因此開發的時候最好儘可能先把外面的框框尺寸優先設置，這樣子的佈局看起來比較合理以後，再開發其餘的佈局就不會有困惑

由於flexbox尺寸是按照1，2這種最終比例在計算的，咱們能夠根據實際設計稿像素，來設置flex的值，好比width: 150px咱們就設置成flex: 150,恰好對應起來