react-native新导航组件react-navigation详解
react-navigation
react-navigation 是今年1月份新出的一款react-native导航组件, 才几个月github就三千多star, 半官方身份, fb推荐使用, 据称性能和效果跟原生差不多. 可能是react-native导航组件的未来主流. 但现在还是beta版本(最新v1.0.0-beta.7
) 坑还比较多, 文档和参考资料较少. 正式项目使用还需慎重.http://www.jianshu.com/p/7d435e199c96
有问题找 issues, 基本上坑都在这里.
官方文档
主要构成
按使用形式主要分三部分:
1 StackNavigator
: 类似于普通的Navigator,屏幕上方导航栏
2 TabNavigator
: 相当于iOS里面的TabBarController,屏幕下方的标签栏
3 DrawerNavigator
: 抽屉效果,侧边滑出
StackNavigator 导航栏
API: StackNavigator(RouteConfigs, StackNavigatorConfig)
// 注册导航
const Navs = StackNavigator({Home: { screen: Tabs },HomeTwo: {screen: HomeTwo, // 必须, 其他都是非必须path:'app/homeTwo', 使用url导航时用到, 如 web app 和 Deep LinkingnavigationOptions: {} // 此处设置了, 会覆盖组件内的`static navigationOptions`设置. 具体参数详见下文},HomeThree: { screen: HomeThree },HomeFour: { screen: HomeFour }
}, {initialRouteName: 'Home', // 默认显示界面navigationOptions: { // 屏幕导航的默认选项, 也可以在组件内用 static navigationOptions 设置(会覆盖此处的设置)header: { // 导航栏相关设置项backTitle: '返回', // 左上角返回键文字style: {backgroundColor: '#fff'},titleStyle: {color: 'green'}},cardStack: {gesturesEnabled: true}}, mode: 'card', // 页面切换模式, 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)headerMode: 'screen', // 导航栏的显示模式, screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏onTransitionStart: ()=>{ console.log('导航栏切换开始'); }, // 回调onTransitionEnd: ()=>{ console.log('导航栏切换结束'); } // 回调
});
navigationOptions
参数:
title
: 导航栏的标题header
: 导航栏设置对象visible
: 导航栏是否显示title
: 导航栏的标题, 可以是字符串也可以是个组件backTitle
: 左上角的返回键文字, 默认是上一个页面的titleright
: 导航栏右按钮left
: 导航栏左按钮style
: 导航栏的styletitleStyle
: 导航栏的title的styletintColor
: 导航栏颜色
cardStack
: 配置card stackgesturesEnabled
: 是否允许右滑返回,在iOS上默认为true,在Android上默认为false
在组件中设置static navigationOptions
示例:
static navigationOptions = {title: 'homeThree',header: (navigation, defaultHeader) => ({...defaultHeader, // 默认预设visible: true // 覆盖预设中的此项}),cardStack: {gesturesEnabled: false // 是否可以右滑返回}
};// 或这样
static navigationOptions = {// title: 'Two', // 写死标题title: (navigation, childRouter) => { // 动态标题if (navigation.state.params.isSelected) {return `${navigation.state.params.name}选中`;} else {return `${navigation.state.params.name}没选中`;}},header: ({ state, setParams, goBack }) => {let right;if (state.params.isSelected) {right = (<Button title="取消" onPress={() => setParams({ isSelected: false })}/>);} else {right = (<Button title="选择" onPress={() => setParams({ isSelected: true })}/>);}let left = (<Button title="返回" onPress={() => goBack()}/>);let visible = false; // 是否显示导航栏return { right, left, visible };},// header: {left: <Button title="返回"/>},
};
StackNavigatorConfig
参数:
initialRouteName
: 设置默认的页面组件,必须是上面已注册的页面组件initialRouteParams
: 初始路由的参数navigationOptions
: 屏幕导航的默认选项paths
: RouteConfigs里面路径设置的映射mode
: 页面切换模式:card
: 普通app常用的左右切换modal
: 上下切换
headerMode
: 导航栏的显示模式:float
: 无透明效果, 默认screen
: 有渐变透明效果, 如微信QQ的一样none
: 隐藏导航栏
cardStyle
: 样式onTransitionStart
: 页面切换开始时的回调函数onTransitionEnd
: 页面切换结束时的回调函数
TabNavigator 标签栏
// 注册tabs
const Tabs = TabNavigator({Home: {screen: Home,navigationOptions: { // 也可以写在组件的static navigationOptions内tabBar: {label: '首页',icon: ({tintColor}) => (<Image source={require('./app/images/home.png')} style={[{tintColor: tintColor},styles.icon]}/>),},}},Bill: {screen: Bill,navigationOptions: {tabBar: {label: '账单',icon: ({tintColor}) => (<Image source={require('./app/images/bill.png')} style={[{tintColor: tintColor},styles.icon]}/>),},}},Me: {screen: Me,navigationOptions: {tabBar: {label: '我',icon: ({tintColor}) => (<Image source={require('./app/images/me.png')} style={[{tintColor: tintColor},styles.icon]}/>),},}}}, {animationEnabled: false, // 切换页面时是否有动画效果tabBarPosition: 'bottom', // 显示在底端,android 默认是显示在页面顶端的swipeEnabled: false, // 是否可以左右滑动切换tabbackBehavior: 'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转tabBarOptions: {activeTintColor: '#ff8500', // 文字和图片选中颜色inactiveTintColor: '#999', // 文字和图片未选中颜色showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示indicatorStyle: {height: 0 // 如TabBar下面显示有一条线,可以设高度为0后隐藏}, style: {backgroundColor: '#fff', // TabBar 背景色// height: 44},labelStyle: {fontSize: 10, // 文字大小},},
});
DrawerNavigator抽屉
const DrawerNav = DrawerNavigator({
Home: { screen: Home },
Bill: { screen: Bill },
Me: { screen: Me },
HomeTwo: { screen: HomeTwo },
HomeThree: { screen: HomeThree },
HomeFour: { screen: HomeFour },
BillTwo: { screen: BillTwo },
BillThree: { screen: BillThree }
}, {
drawerWidth: 200, // 抽屉宽
drawerPosition: 'left', // 抽屉在左边还是右边// contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
contentOptions: {
initialRouteName: Home, // 默认页面组件
activeTintColor: 'white', // 选中文字颜色
activeBackgroundColor: '#ff8500', // 选中背景颜色
inactiveTintColor: '#666', // 未选中文字颜色
inactiveBackgroundColor: '#fff', // 未选中背景颜色
style: { // 样式}}
});
navigation
在StackNavigator
中注册后的组件都有navigation
这个属性. navigation
又有5个参数:navigate
, goBack
, state
, setParams
, dispatch
, 可以在组件下console.log
一下this.props
就能看到.
this.props.navigation.navigate('Two', { name: 'two' })
: push下一个页面routeName
: 注册过的目标路由名称params
: 传递的参数action
: 如果该界面是一个navigator的话,将运行这个sub-action
this.props.navigation.goBack()
: 返回上一页this.props.navigation.state
: 每个界面通过这去访问它的router,state其中包括了:routeName
: 路由名key
: 路由身份标识params
: 参数
this.props.navigation.setParams
: 该方法允许界面更改router中的参数,可以用来动态的更改导航栏的内容this.props.navigation.dispatch
: 可以dispatch一些action,主要支持的action有:Navigate
:import { NavigationActions } from 'react-navigation'const navigationAction = NavigationActions.navigate({routeName: 'Profile',params: {},// navigate can have a nested navigate action that will be run inside the child routeraction: NavigationActions.navigate({ routeName: 'SubProfileRoute'})})this.props.navigation.dispatch(navigationAction)
Reset
: Reset方法会清除原来的路由记录,添加上新设置的路由信息, 可以指定多个action,index是指定默认显示的那个路由页面, 注意不要越界了import { NavigationActions } from 'react-navigation'const resetAction = NavigationActions.reset({index: 0,actions: [NavigationActions.navigate({ routeName: 'Profile'}),NavigationActions.navigate({ routeName: 'Two'})]})this.props.navigation.dispatch(resetAction)
SetParams
: 为指定的router更新参数,该参数必须是已经存在于router的param中import { NavigationActions } from 'react-navigation'const setParamsAction = NavigationActions.setParams({params: {}, // these are the new params that will be merged into the existing route params// The key of the route that should get the new paramskey: 'screen-123',})this.props.navigation.dispatch(setParamsAction)
Navigation Actions
- 支持以下actions:
Navigate
:Reset
:Back
:Set Params
:Init
:
Deep Link
其他app或浏览器使用url打开次app并进入指定页面. 如浏览器输入url demo4://home/home3
直接进入home3
页面.
iOS版设置
- 使用Xcode设置
Schemes
; - 在
AppDelegate
添加一下代码:
- (BOOL)application:(UIApplication *)application openURL:(NSURL *)url
sourceApplication:(NSString *)sourceApplication annotation:(id)annotation {return [RCTLinkingManager application:application openURL:url
sourceApplication:sourceApplication annotation:annotation];
}
- js组件在注册路由时设置唯一的路径path, 例如
Home2: { screen: Home2, path:'app/Home2' }
; - 在手机浏览器访问
demo4://app/Home2
, 弹窗选择打开, 就可以打开demo4
app并进到Home2
页面了.
react-native新导航组件react-navigation详解相关推荐
- React Native 二 常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...
- [RN] React Native 自定义导航栏随滚动渐变
React Native 自定义导航栏随滚动渐变 实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...
- React Native手势密码组件
本文原创首发于公众号:ReactNative开发圈,转载需注明出处. 这次介绍的React Native手势密码组件为react-native-gesture-password,纯JavaScript ...
- Vue 路由导航守卫(全局守卫、路由独享守卫、组件内守卫)详解
Vue 路由导航守卫(全局守卫.路由独享守卫.组件内守卫)详解: 路由守卫 官方解释 "导航"表示路由正在发生改变.正如其名,vue-router提供的导航守卫主要用来通过跳转或取 ...
- 利用 Create React Native App 快速创建 React Native 应用
React Native App简介 打开React Native官方文档你会发现,在Getting Started章节下新添加一个Quick Start Tab页.Quick Start是在v0.4 ...
- Win7下的内置FTP组件的设置详解
Win7下的内置FTP组件的设置详解 在局域网中共享文件,FTP是比较方便的方案之一.Win7内部集成了FTP,只是设置起来颇费一番功夫.着文以记之. 一.安装FTP组件 由于Win7默认没有安装FT ...
- java和vue实现拖拽可视化_Vue拖拽组件开发实例详解
摘要:这篇Vue栏目下的"Vue拖拽组件开发实例详解",介绍的技术点是"Vue拖拽组件开发实例.vue拖拽组件.拖拽组件.组件开发.开发实例.实例详解",希望对 ...
- 组件化实践详解(二)
在上一篇文章<组件化实践详解(一)>中我们介绍了组件化实践的目标和实践步骤,本文继续说说关于组件化实践遇到的问题及思考. 1.组件内的架构设计 这条本来我是不想写的,但是很多组件化的文章里 ...
- php 8 jit,PHP JIT 是什么?PHP8 新特征之 JIT 图文详解_后端开发
PHP8 alpha1已经在昨天宣布,置信关于JIT是人人最体贴的,PHP8 JIT是什么,又怎样用,又有什么要注意的,以及机能提拔究竟咋样? 视频教程引荐:<PHP编程从入门到通晓> 起 ...
- 【java8新特性】——Stream API详解(二)
一.简介 java8新添加了一个特性:流Stream.Stream让开发者能够以一种声明的方式处理数据源(集合.数组等),它专注于对数据源进行各种高效的聚合操作(aggregate operation ...
最新文章
- DB2存储过程——条件判断语句if then
- LeetCode Unique Binary Search Trees II(递归或者dp)
- Ansible Playbook核心元素以及组件
- Altium designer—STM32F103ZET6最小系统PCB图
- php 转换数组的字符集,PHP 自动转换字符集(支持字符串和数组)功能实例
- linux笔记之 vi编辑器和用户的配置文件及提权
- 20220209-CTF MISC-BUUCTF-伪加密(ZIP文件块 十六进制分析)
- 谓词::不适合Java
- php使用phantomjs
- 用Docker搭建Laravel开发环境
- MySQL安装过程中出现的vcruntime140.dll缺失
- apache tomcat php mysql 配置_Apache与Tomcat服务器整合的基本配置方法及概要说明
- get和post方式请求数据,jsonp
- 遗传算法原理以及matlab代码
- IT寡头们之间的围棋模式;最新动向:多点布局,规模经营和资本扩张
- 遇到问题--python---ImportError: Missing optional dependency ‘xlrd‘. Install xlrd >= 1.0.0 for Excel supp
- JSON数据结构(A、快速入门篇)(Yanlz+Data+JsonArray+JsonObject+JsonValue+JsonMapper.ToJson+JsonMapper.ToObject+)
- 计算机语言发展简史,计算机语言发展简史
- 入职国企外包第一个星期,实感
- python CV 趣味项目 答题卡识别