ReactNative基础(五)使用react-navigation实现页面的跳转、参数的传递(StackNavigator
来源:互联网 发布:知乎怎么邀请提问 编辑:程序博客网 时间:2024/05/19 03:42
作者:阿钟
博客:http://blog.csdn.net/a_zhon
此博客基于react-native-0.48.4
Navigator(导航栏)
在ReactNative v0.43之前的时候官方提供了Navigator组件,在v0.44版本之后官方就把他废弃了这是为什么呢?原因就是有个比他更好的react-navigation导航栏了、不得不说第三方依赖库真的很强大。
React Navigation
官网地址:https://reactnavigation.org
其中包含了我们开发中最常用的三种导航方式
StackNavigator(顶部导航栏)
TabNavigator (标签导航栏)
DrawerNavigator(侧滑菜单导航栏)
效果图可以在官网首页看下
这篇文章就简单来说说StackNavigator
既然使用的是第三方库,如果在你项目的node_modules文件夹中没有react-navigation那么你需要执行如下命令
引入react-navigation中的StackNavigator
创建一个Application.js文件
这个文件负责对我们需要跳转的页面进行注册(相当于在Android中每一个Activity都需要在清单文件中注册),同时也创建了navigation供后续操作。
修改 android 和 ios 的入口文件加载这个文件,然后就会继续加载Main页面 最终显示内容
效果图:
在Main页面添加一个按钮跳转至下一个页面、并修改导航栏的样式
这里就要重点说一说navigationOptions中的属性了
可以参考一下这篇文章react-navigation使用技巧或者官网给出的属性介绍
headerTitle: '标题' ===> 导航栏的标题
header: null ===> 隐藏导航栏
headerTintColor: 'white' ===> 返回按钮的颜色
headerTitleStyle: {} ===> 导航栏文字的样式
headerStyle: {} ===> 导航栏的样式
headerRight: (< View/>) ===> 设置顶部导航栏友边的视图 和 解决当有返回箭头时,文字不居中
headerLeft: (< View/>) ===> 设置导航栏左边的视图 和 去除返回箭头
headerBackTitle: null ===> 设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题
gestureResponseDistance: {horizontal: 300} ===> //设置滑动返回的距离
上面跳转页面的时候我们向下一个页面传递了一个键值为key的参数
页面接收传递过来的值
页面跳转效果图(有点失帧)
Details页面这里就不贴出了,跟Main内容都是差不多的。可以查看文末给出的源码
主要说一下最后一个带有菜单的页面
主要还是配置navigationOptions属性
隐藏左边返回箭头:headerLeft: (< View/>),
添加右边的菜单:headerRight: (),
对菜单添加点击事件,添加headerRight视图的时候我们已经调用好了方法现在只需要定义即可
需要在view渲染完成之后添加点击事件
点击事件响应的函数
Navigator:
http://reactnative.cn/docs/0.43/navigator.html#content
react-navigation:
https://reactnavigation.org/
react-navigation使用技巧:
http://www.jianshu.com/p/2f575cc35780
属性介绍:
https://reactnavigation.org/docs/navigators/stack
码源:
https://github.com/azhon/ReactNative/tree/master/Pagejump
一命二运三风水,四修阴德五读书!
刘桂林
微信号 : Android_LiuGuiLin
新浪微博:@刘某人程序员
- ReactNative基础(五)使用react-navigation实现页面的跳转、参数的传递(StackNavigator)
- ReactNative基础(五)使用react-navigation实现页面的跳转、参数的传递(StackNavigator
- react-navigation自定义StackNavigator页面跳转动画
- ReactNative基础(六)使用react-navigation实现页面导航布局效果(TabNavigator)
- React Native 页面跳转react-navigation导航器的使用
- React-navigation StackNavigator 使用攻略
- React-Native 中 StackNavigator的跳转界面的使用
- React Native开发之React Navigation的StackNavigator 详解
- react-native 使用 StackNavigator 导航器跳转页面
- React-navigation之StackNavigator
- ReactNative导航器react-navigation的使用心得总结
- react native使用react-navigation跳转后多页面数据传递总结
- reactNative的页面跳转
- ReactNative学习实例(四) 使用Navigator实现页面跳转和信息传递
- React-Navigation导航(页面跳转)
- react-navigation之TabNavigator, StackNavigator使用配合redux
- react-navigation的使用
- StackNavigator的简单使用
- 数据结构(线性表预习)
- 【bzoj1485:】【 [HNOI2009]有趣的数列】模任意数的卡特兰数
- NOIP模拟总结10.23-11.1
- 如何用循环方式来display LLL by reverse way
- 51nod 1617 奇偶数组 分治
- ReactNative基础(五)使用react-navigation实现页面的跳转、参数的传递(StackNavigator
- 基础
- 【JZOJ 5416】【NOIP2017提高A组集训10.22】密码
- 人工智能发展的核心——机器学习
- 2017-10-23离线赛总结
- execute、executeQuery和executeUpdate之间的区别
- bzoj4517 [Sdoi2016]排列计数 (错排 + 组合数)
- 2018年AI 8大趋势:人工智能将助力Google、Facebook等大公司稳赢?
- 10-面向对象(接口-实现implements) 10-面向对象(接口-实现implements)2