react-navigation实现navBar

记录下实现导航条的步骤和遇到的问题以及解决方法.

实现步骤:

第一步:  添加依赖库

        创建好新项目TabBar_Demo, 之后, cd进入项目根目录, 

        执行 yarn add react-navigation 命令添加依赖库.

第二步:  创建目录结构

    首先,创建root.js文件作为TabBar_Demo新的入口文件,具体方法见:

    React-native 入口页设置 - .

   之后, 新建四个js文件实现导航四个页面的切换,新建image文件夹放置icon.

完整的项目结构如下: 

项目结构

第三步: Root.js文件

1.引入react-navigation 依赖库,引入四个js页面文件:

引入文件

2. 配置路由,定义导航组件:

配置路由

路由样式

注意框出来的两个高度,一定要写!!!

同时, showIcon 默认值为false,这里要设置为 true 否则android不显示icon.

3. 追加导航做跳转,设置默认显示页面,输出这个组件:

设置样式.默认页面

第四步: 导航的每个页面:

设为普通页面即可

普通页面

最后,感谢wangjiawei - 大大的指导,奉上原文链接:

React-Native react-navigation实现iOS与Android的TabBar - .

React Native实现 StackNavigator+TabNavigator 导航、切... -