今天跟着RN中文网学习使用导航器跳转页面,现在官方推荐React-Nevigation。但是RN中文网写的太简单,不知道该怎么用,就去搜索了其他文章。结果发现其他文章又写的太繁琐,一上来就给你介绍一大堆属性,代码也很零散,看的让人头大,几乎想要放弃。后来看到了xiongtm的这篇博客,相对还算简单一些,也贴上了github的项目地址,我就直接clone下来了,运行了一下,发现例子也比较简单。这才有点信心,继续研究下去。
react-navigation里面包含了三种Navigator:StackNavigator,TabNavigator和DrawerNavigator。
StackNavigator可以实现最普通的跳转,比如在A页面点击一个按钮,然后跳转到B页面,就用StackNavigator,但是它会自动帮你的页面添加一个标题栏,如果是A跳转到B,还会在B页面的标题栏自动添加一个返回键。如果你不需要的话,可以通过设置属性,将它隐藏。
TabNavigator可以实现类似于Android的TabLayout的效果,左右滑动屏幕来切换界面。这个导航栏的位置可以用属性控制,从而实现顶部导航栏或者底部导航栏的效果。
DrawerNavigator可以实现侧滑,弹出抽屉的效果。
我今天只实现了StackNavigator和TabNavigator两种,都只实现了简单的功能,这就是我所需要的,通过简单的例子让自己先有能力实现跳转,入门后,再学习各种复杂的属性。根据我的经验,对于初学者来说,光看文章,很难掌握一个新东西的用法,最好的办法就是,下载一个Demo,运行起来,看一下效果,然后结合代码来学习,这样就知道了到底该如何实现你所想要的效果。
我把自己今天写的Demo贴一下。
运行项目之前,要先下载一下react-navigation库,使用下面的命令