成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

waltr / 2807人閱讀

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

react-native 開發(fā)筆記

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

TabBarIos的使用

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

遇到的問(wèn)題

圖標(biāo)大小適配問(wèn)題
因?yàn)樵O(shè)計(jì)給出來(lái)的設(shè)計(jì)稿的2X，所以切出來(lái)的圖都是2倍的，這就導(dǎo)致圖標(biāo)很大，翻遍文檔，只找到一個(gè){{uri: base64Icon, scale: 2}}這樣子的配置，但是本地圖片，總不能先手動(dòng)轉(zhuǎn)換成base64字符串再用吧。找來(lái)找去，在Image組件里面看到，圖片適配方案，如果把圖片保存為[email protected],是不是也可以在icon里面使用？結(jié)果是令人欣慰的。

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

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

Navigator的使用

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

flexbox的使用

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

因?yàn)閒lexbox尺寸是按照1，2這種最終比例在計(jì)算的，我們可以根據(jù)實(shí)際設(shè)計(jì)稿像素，來(lái)設(shè)置flex的值，比如width: 150px我們就設(shè)置成flex: 150,剛好對(duì)應(yīng)起來(lái)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82897.html

相關(guān)文章

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

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

    nidaye 評(píng)論0 收藏0

  • react-native, react-navigation, redux 學(xué)習(xí)筆記

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

    妤鋒シ 評(píng)論0 收藏0

  • 前端補(bǔ)集 - 收藏集 - 掘金

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

    YorkChen 評(píng)論0 收藏0

  • 前端補(bǔ)集 - 收藏集 - 掘金

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

    AbnerMing 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<