rn...vue

RN中的底部导航的路由

2017-12-29  本文已影响113人  0安

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组件的基本使用   

上一篇 下一篇

猜你喜欢

热点阅读