React-Native選項卡(react-navigation)之createBottomTabNavigator學習

前言:

    上一章節咱們學習了導航條createStackNavigator,這一章咱們緊接着來學習選項卡createBottomTabNavigator,在iOS中這是tabbar.

效果:

    咱們先來看一下要實現的效果↓

咱們看到上gif圖中,底部有兩個頁面,有Home頁面,Settings頁面,其中點擊Home的Go To HomeDetail按鈕會跳轉一個HomeDetail詳情頁面.  因此咱們在上一章代碼中的兩個界面的基礎上還須要在建立一個界面,咱們命名爲HomeDetail

思路:

     先簡單說下思路,通常APP模塊是根據底部選項卡來劃分的(也就是這裏的createBottomTabNavigator). 很明顯,咱們demo中分爲兩個模塊,Home和Settings,Home界面點擊按鈕能夠跳轉一個界面,因此Home模塊有兩個界面,settings模塊一個界面.咱們定義路由的時候就根據這個思路去作.

實戰:

      仍是老規矩,首先咱們須要先引入文件.引入新增長的HomeDetail頁面.

而後配置路由.分爲兩個模塊配置

配置完成後須要統一交由vreateBottomTabNavigator去管理

到這裏咱們就實現了基本的導航條功能.若是對你有幫助,請分享給身邊的朋友.讓咱們一塊兒進步!

 我代碼以圖片的形式展現一是爲了更直觀的展現,另外一方面是推薦你們敲一遍加深印象.如需源碼請加羣,交流學習!  最後附上網絡請求配合經常使用列表學習分享:http://www.javashuo.com/article/p-glmsktxc-gw.html