react-native 開發(fā)筆記（一）

waltr 發(fā)布于2019-08-20 16:23 / 2797人閱讀

摘要：顏色問題這個不算問題了，算是優(yōu)勢。一般做開發(fā)，如果不是圖標字體的話，我們會為圖片的選中和不選中準備兩張圖片做切換。這可能會導致開發(fā)者很困惑，怎么高度和我想的不一致呢那只要把剩余的高度都設置準確，這些都會迎刃而解。

react-native 開發(fā)筆記

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

TabBarIos的使用

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

遇到的問題

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

active顏色問題
這個不算問題了，算是優(yōu)勢。一般做web開發(fā)，如果不是圖標字體的話，我們會為圖片的選中和不選中準備兩張圖片做切換。在react-native里面不需要這么復雜，只需要準備一張圖片，通過配置就可以解決了

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

Navigator的使用

我使用的react-native的版本是0.44，這個版本里面移除了Navigator這個組件，所以在非正式版本里面出現(xiàn)問題，需要優(yōu)先查看是不是版本問題導致的。不過幸好的是，react-natie提示做的很好，原來它們把Navigator移到了react-native-deprecated-custom-components這個多帶帶的包里，安裝引用一下就好了

flexbox的使用

如果你把一個View設置flex:1，它默認會占滿剩下的垂直空間。這可能會導致開發(fā)者很困惑，怎么高度和我想的不一致呢？那只要把剩余的View高度都設置準確，這些都會迎刃而解。
所以開發(fā)的時候最好盡量先把外面的框框尺寸優(yōu)先設置，這樣子的布局看起來比較合理之后，再開發(fā)其他的布局就不會有困惑

因為flexbox尺寸是按照1，2這種最終比例在計算的，我們可以根據實際設計稿像素，來設置flex的值，比如width: 150px我們就設置成flex: 150,剛好對應起來

云服務器 GPU云服務器學習筆記一 java開發(fā)入門筆記 react-native React-Native版Mung

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/82897.html

react-native 開發(fā)筆記（二）

摘要：原來需要在里面把字體拖進去，然后在里面配置一個里面的配置項如果沒有這條，可以新增一個，然后選擇到 react-native 開發(fā)筆記 Navigator導航 app的導航路徑是tab->tabItem->tabItemChild，交互設計的要求是tab子頁面的顯示是要蓋過tab導航條的，如果我們把tab作為根組件，Navigator作為tab的子tab的話，tabItemChild始終...

nidaye 2019-08-21 11:40 評論0 收藏0
react-native, react-navigation, redux 學習筆記

摘要：的使用用戶發(fā)出函數算出新的重新渲染三大原則單一數據源，利用的形式向下傳播數據流決定只讀，通過修改通過純函數來修改組件狀態(tài)，是描述動作的純函數連接和基于全局的，選擇我們要注入的不同的組件分開把注入，讀取方法三劍客先確定一下初始狀 redux的使用 react-native, react, react-redux, react-navigaition, redux-thunk, redu...

妤鋒シ 2019-08-20 17:47 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發(fā)布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

YorkChen 2019-08-29 12:41 評論0 收藏0
前端補集 - 收藏集 - 掘金

摘要：原文地址一個非常適合入門學習的博客項目前端掘金一個非常適合入門學習的項目，代碼清晰結構合理新聞前端掘金介紹一個由編寫的新聞。深入淺出讀書筆記知乎專欄前端專欄前端掘金去年的一篇老文章，恰好今天專欄開通，遷移過來。破解前端面試（80% 應聘者不及格系列）：從閉包說起 - 掘金修訂說明：發(fā)布《80% 應聘者都不及格的 JS 面試題》之后，全網閱讀量超過 6W，在知乎、掘金、cnodejs ...

AbnerMing 2019-08-20 16:57 評論0 收藏0