记录下实现导航条的步骤和遇到的问题以及解决方法.
实现步骤:
第一步: 添加依赖库
创建好新项目TabBar_Demo, 之后, cd进入项目根目录,
执行 yarn add react-navigation 命令添加依赖库.
第二步: 创建目录结构
首先,创建root.js文件作为TabBar_Demo新的入口文件,具体方法见:
之后, 新建四个js文件实现导航四个页面的切换,新建image文件夹放置icon.
完整的项目结构如下:
第三步: Root.js文件
1.引入react-navigation 依赖库,引入四个js页面文件:
2. 配置路由,定义导航组件:
注意框出来的两个高度,一定要写!!!
同时, showIcon 默认值为false,这里要设置为 true 否则android不显示icon.
3. 追加导航做跳转,设置默认显示页面,输出这个组件:
第四步: 导航的每个页面:
设为普通页面即可
最后,感谢wangjiawei - 简书大大的指导,奉上原文链接: