記錄下實(shí)現(xiàn)導(dǎo)航條的步驟和遇到的問題以及解決方法.

實(shí)現(xiàn)步驟:

第一步: ?添加依賴庫

? ? ? ? 創(chuàng)建好新項(xiàng)目TabBar_Demo, 之后, cd進(jìn)入項(xiàng)目根目錄,?

? ? ? ? 執(zhí)行 yarn add react-navigation 命令添加依賴庫.

第二步: ?創(chuàng)建目錄結(jié)構(gòu)

? ? 首先,創(chuàng)建root.js文件作為TabBar_Demo新的入口文件,具體方法見:

? ??React-native 入口頁設(shè)置 - 簡書.

? ?之后, 新建四個(gè)js文件實(shí)現(xiàn)導(dǎo)航四個(gè)頁面的切換,新建image文件夾放置icon.

完整的項(xiàng)目結(jié)構(gòu)如下:?

項(xiàng)目結(jié)構(gòu)

第三步: Root.js文件

1.引入react-navigation 依賴庫,引入四個(gè)js頁面文件:

引入文件

2. 配置路由,定義導(dǎo)航組件:

配置路由

路由樣式

注意框出來的兩個(gè)高度,一定要寫!!!

同時(shí), showIcon 默認(rèn)值為false,這里要設(shè)置為 true 否則android不顯示icon.

3. 追加導(dǎo)航做跳轉(zhuǎn),設(shè)置默認(rèn)顯示頁面,輸出這個(gè)組件:

設(shè)置樣式.默認(rèn)頁面

第四步: 導(dǎo)航的每個(gè)頁面:

設(shè)為普通頁面即可

普通頁面

最后,感謝wangjiawei - 簡書大大的指導(dǎo),奉上原文鏈接:

React-Native react-navigation實(shí)現(xiàn)iOS與Android的TabBar - 簡書.

React Native實(shí)現(xiàn) StackNavigator+TabNavigator 導(dǎo)航、切... - 簡書