RN中的底部导航的路由

RN中的底部路由的设置入门   

具体参考了如下

react-native进入姿势   

react-native-tab-navigator组件的基本使用

1.底部按钮需要安装   react-native-tab-navigator   功能   tab-navigator 并没有包含早react-native包中需要再次下载

cmd窗口中输入    npm install  react-native-tab-navigator  --save

我的项目的目录    只是测试的,tabBar.js是注册的组件   head.js跟App.js是导航切换的两个页面


RNdemo目录


2.开始设置底部导航的路由


如图所示我们首先需要引入    tabNavigator  和  导航的相关页面  Head ,App


路由的参数设置


默认的页面设置


每一个语句的含义


3.head.js和App.js  中按照组件的定义写就可以了。


App的页面组件

5.最后的效果




引用了react-native-tab-navigator组件的基本使用   



©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简短说明 收录一些好用的RN第三方组件,以方便日常的使用,大家有什么推荐的也可以跟我说,我加进去。如有冒犯,可以联...
    以德扶人阅读 43,820评论 44 214
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,986评论 25 709
  • React Native开发中常用三方组件大全 作者整理的一套常用的React Native开发中使用到的三方组件...
    光强_上海阅读 21,535评论 6 95
  • 一瞬间觉得你是在看我 一瞬间发现你的眼里没有我 现在 此时此刻 我和你 你和谁
    摆摆摇摇阅读 1,666评论 0 0
  • 第一章 這件事情發生在......第二次世界大戰。 我,出生於一個德國其中一個富有的家庭。光是我們這座大皇宮,就有...
    Lucianna_712阅读 1,252评论 1 1

友情链接更多精彩内容