項目需求,沒有react-native基礎的我,花了一周擼了一個項目,總結一下,就是滿滿的知識點啊。
這一篇主要講一下navigatorIOS和tabbarIOS聯合使用。說實話,官網的教程真的挺難理解的。
先上兩張圖:
首頁
搜索頁面
首頁有tabbar和navigator,跳轉搜索頁隱藏navigator。
實現思路:
1.tabbar和navigator的聯合使用
我是將tabbar和navigator放在一個組件里面,在app.js里面引用
app.js
在組件里面:
? ?如果需要navigator和tabbar聯合使用,需要將NavigatorIOS嵌套在TabBarIOS.Item中
如圖:
聯合使用
2.搜索頁隱藏tabbarIOS
利用tabbarIOS的marginBottom來達到隱藏的目的
隱藏tabbar
然后在組件里面定義一個方法,實現tabbar的顯示和隱藏
隱藏和顯示方法
bottom可以根據hiddenTab來定義數值? let bottom = this.state.hiddenTab == true ? -100 : 0;
在搜索頁隱藏tabbar首先要將隱藏和顯示的方法通過passProps傳給搜索頁面
傳遞方法
接著搜索的頁面接受到方法后:生命周期開始時,隱藏tabbar;生命周期結束時,顯示tabbar
顯示,隱藏tabbar
到此,react-native之navigatorIOS和tabbarIOS聯合使用以及詳情頁面隱藏tabbar就實現了,因為才學習了一周所以還有很多不足,最近才看了react-navigation感覺很強大。聯合使用和隱藏tabbar以及一些自定義導航都比較全面。這個功能會用react-navigation在寫一遍,到時候應該會簡單很多。
如有不足,敬請指教~