react native 3 底部tabbar和页面跳转

我使用了两个插件来完成,这两个功能,一个插件是react-native-tab-navigator,另一个是官方推荐react-navigation

我们先介绍底部tabbar,这里我们使用插件react-native-tab-navigator

安装:

直接上页面代码了:setup.js文件

我们创建HomeScreen

其他两个cart 和profile文件基本样式都差不多,只是修改一下类名和text内容即可。

20170708225747

 

好了,底部的tabbar已经大功告成了。点击试试吧。

 

下面,我们希望点击,首页字,能够跳转到其他页面,这如何操作呢?

就要使用我们的下一个官方导航react-navigation。

安装:

在HomeScreen中加入:

整体代码如下:

ItemScreen与CartScreen样子是一样的。

setup.js也小有更改:

好了,看看效果吧。

reactnagiver001

 

 

发表评论