React-Native导航条(react-navigation)之createStackNavigator学习

 

前言:

如今混合开发已经愈来愈发火热,也许将来不久就会将原生开发一点一点吞噬掉,因此鄙人也开始了解一些关于RN相关知识,因为我是从iOS转过来并无前端开发经验,对JS,ES6并非很熟悉,因此上手很吃力,看官网并不能快速消化.只能看一些傻瓜式教程.   作APP开发页面跳转在项目中是最基本的.前段时间刚刚学习了在RN中的页面跳转.查阅了特别多的相关知识点.配合RN中文网https://reactnative.cn/docs/navigation/版本号(0.56).   里边提到开发导航有两种方式.    

1.NavigatorIOS   2.React Navigation   

先说第一种,我是作iOS的,看到NavigatorIOS显得格外的亲切,而且有提到他是基于iOS原生UINavgationController封装的,就更让人兴奋了.可是官方建议,若是只是开发iOS平台能够用这种,让我打消了学习他的念头,学习RN不就是为了他能够一套代码适用于安卓和苹果两端.因此我果断放弃.

第二种方式React Navigation.官方也是推荐学习这种方式.他是一种单独的导航库,使用简单.

首先安装库,在终端执行命令行:yarn add react-navigation.     yarn是Facebook提供的替代npm的工具,能够加速node模块的下载,若是没有安装yarn 命令行执行:  npm install -g yarn react-native-cli  安装完yarn后要设置镜像源: 1. yarn config set registry https://registry.npm.taobao.org --global                2. yarn config set disturl https://npm.taobao.org/dist --global 而后再去安装React Navigation库就能够了

接下来实战, 咱们须要使用的一个核心函数是createStackNavigator       ①要先引用该函数,②它须要一个路由配置对象.

最简单的实例,实现两个界面跳转.首先咱们先建立这两个界面文件,我将他们命名为HomeScreen,DetailScreen. 先看一下效果

 废话很少说,直接看代码  

 

 

 而后在看DetailScreen界面

 

最后在App.js中

 

 这样就实现了简单页面跳转了. 可是在平时开发中并不会这么简单,确定会有各类状况,好比产品经理会要求标题颜色,背景颜色.标题大小等等要求.我们接着往下看

 

还有不少属性,这里只简单例举几个常见的.太多就不一一介绍了.可自行百度就能够. 那么如今问题又来了.一个项目少说几十个界面.总不能每一个界面都加这么一段代码吧.那多捞!!,确定要设置一个全局的样式.若有个别页面有需求在单独设置便可. 咱们须要在路由位置进行设置.

到这里咱们就实现了全局的设置导航条的样式.  在开发中常常会有界面传值.点击Home界面按钮.跳转Detail界面.传递值过去

若是多个值就('Details',{那么:'传值'},{age:20})便可,而后在Details界面去接收一下便可.

 接下来咱们看自定义返回按钮和导航条右侧按钮,由于平时开发中可能系统返回按钮并不符合需求.

经过上边咱们能够看到,返回按钮旁边有文字,默认是上个界面的title,首先去掉按钮旁边的文字,这里须要注意的是,好比想去掉Details页面的文字,那么咱们须要在上个界面去操做.也就是Home界面.

咱们再次load界面,就会发现文字不见了!!下边是自定义返回按钮和右侧按钮 

到这里咱们就实现了基本的导航条功能.若是对你有帮助,请分享给身边的朋友.让咱们一块儿进步!

另外为了使你们可以快速掌握RN技术,并上手项目.升值加薪,楼主以超低价分享学习视频,从零基础到大神.加群领取

 

 我代码以图片的形式展现一是为了更直观的展现,另外一方面是推荐你们敲一遍加深印象.如需源码请加群,交流学习!最后附上底部tabbar导航的学习分享:http://www.javashuo.com/article/p-rqxsxbou-ha.html