react-navigation 使用教程(配完整项目)
Fb在React Native当前最新版本0.44中将Navigator删除。推荐使用react-navigation,据称此库有原生般的性能体验效果。可能会成为未来React Native导航组件的主流军。
本文主要介绍如何使用react-navigation构建导航栏与标签栏
这里有个用React Native实现网易新闻客户端的项目,里面除了使用了react-navigation外,还包括其他一些常用库的使用,需要的可以点击传送门>>>
使用前需要了解下StackNavigator和TabNavigator的属性
StackNavigator属性介绍
navigationOptions:配置StackNavigator的一些属性。 title:标题,如果设置了这个导航栏和标签栏的title就会变成一样的,不推荐使用 header:可以设置一些导航的属性,如果隐藏顶部导航栏只要将这个属性设置为null headerTitle:设置导航栏标题,推荐 headerBackTitle:设置跳转页面左侧返回箭头后面的文字,默认是上一个页面的标题。可以自定义,也可以设置为null headerTruncatedBackTitle:设置当上个页面标题不符合返回箭头后的文字时,默认改成"返回" headerRight:设置导航条右侧。可以是按钮或者其他视图控件 headerLeft:设置导航条左侧。可以是按钮或者其他视图控件 headerStyle:设置导航条的样式。背景色,宽高等 headerTitleStyle:设置导航栏文字样式 headerBackTitleStyle:设置导航栏‘返回’文字样式 headerTintColor:设置导航栏颜色 headerPressColorAndroid:安卓独有的设置颜色纹理,需要安卓版本大于5.0 gesturesEnabled:是否支持滑动返回手势,iOS默认支持,安卓默认关闭 screen:对应界面名称,需要填入import之后的页面 mode:定义跳转风格 card:使用iOS和安卓默认的风格 modal:iOS独有的使屏幕从底部画出。类似iOS的present效果 headerMode:返回上级页面时动画效果 float:iOS默认的效果 screen:滑动过程中,整个页面都会返回 none:无动画 cardStyle:自定义设置跳转效果 transitionConfig: 自定义设置滑动返回的配置 onTransitionStart:当转换动画即将开始时被调用的功能 onTransitionEnd:当转换动画完成,将被调用的功能 path:路由中设置的路径的覆盖映射配置 initialRouteName:设置默认的页面组件,必须是上面已注册的页面组件 initialRouteParams:初始路由参数
TabNavigator的属性介绍
screen:和导航的功能是一样的,对应界面名称,可以在其他页面通过这个screen传值和跳转。 navigationOptions:配置TabNavigator的一些属性 title:标题,会同时设置导航条和标签栏的title tabBarVisible:是否隐藏标签栏。默认不隐藏(true) tabBarIcon:设置标签栏的图标。需要给每个都设置 tabBarLabel:设置标签栏的title。推荐 tabBarPosition:设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom') swipeEnabled:是否允许在标签之间进行滑动 animationEnabled:是否在更改标签时显示动画 lazy:是否根据需要懒惰呈现标签,而不是提前,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐为true trueinitialRouteName: 设置默认的页面组件 backBehavior:按 back 键是否跳转到第一个Tab(首页), none 为不跳转 tabBarOptions:配置标签栏的一些属性activeTintColor:label和icon的前景色 活跃状态下 activeBackgroundColor:label和icon的背景色 活跃状态下 inactiveTintColor:label和icon的前景色 不活跃状态下 inactiveBackgroundColor:label和icon的背景色 不活跃状态下 showLabel:是否显示label,默认开启 style:tabbar的样式 labelStyle:label的样式安卓属性 activeTintColor:label和icon的前景色 活跃状态下 inactiveTintColor:label和icon的前景色 不活跃状态下 showIcon:是否显示图标,默认关闭 showLabel:是否显示label,默认开启 style:tabbar的样式 labelStyle:label的样式 upperCaseLabel:是否使标签大写,默认为true pressColor:material涟漪效果的颜色(安卓版本需要大于5.0) pressOpacity:按压标签的透明度变化(安卓版本需要小于5.0) scrollEnabled:是否启用可滚动选项卡 tabStyle:tab的样式 indicatorStyle:标签指示器的样式对象(选项卡底部的行)。安卓底部会多出一条线,可以将height设置为0来暂时解决这个问题 labelStyle:label的样式 iconStyle:图标样式
一、App.js
首先在App.js中,导入库,并且设置Navigator。
import { StackNavigator } from 'react-navigation'const Navigator = StackNavigator(RouteConfig, StackNavigatorConfig);
其中RouteConfig,StackNavigatorConfig我分别写在两个文件中,StackNavigatorConfig可以设置,也可以不设置,主要可以用来设置自定义动画。
二、RouteConfig.js
/*
* 导入视图
*/
import MainTab from './TabNavigator'
import NewsDetail from './pages/subPages/NewsDetail'
import VideoDetail from './pages/subPages/VideoDetail'
import NewsSearch from './pages/subPages/NewsSearch'/*--- 路由配置 ---* 所有组件都必须在这里注册* 在这里设置的navigationOptions的权限 > 对应页面里面的 static navigationOptions的设置 > StackNavigator()第二个参数里navigationOptions的设置* 该配置文件会在App.js里的StackNavigator(导航组件)里使用。*/
const RouteConfig = {MainTab: {screen:MainTab,//navigationOptions: ({navigation}) => ({header: null})},// 下面三个页面我需要隐藏导航栏NewsDetail: {screen: NewsDetail,navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})},VideoDetail: {screen: VideoDetail,navigationOptions: ({navigation}) => ({header:null, gesturesEnable:true})},NewsSearch: {screen: NewsSearch,navigationOptions: ({navigation}) => ({header: null, gesturesEnable: true})}
}export default RouteConfig;
三、StackNavigatorConfig.js
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator'// 默认横向跳转
// 如果即将要跳转到的页面需要其它跳转方式
// 可在路由参数中传入 transition参数,可选值有:forHorizontal,forVertical,forFadeFromBottomAndroid,forFade
// 示例定义竖向跳转:this.props.navigation.push('ProdDetail', {'prodID': item.id, 'transition':'forVertical'})
const screenInterpolater = (sceneProps) => {const { route } = sceneProps.scene;const params = route.params || {};const transition = params.transition || 'forHorizontal';return CardStackStyleInterpolator[transition](sceneProps);
};const StackNavigationConfig = {initialRouteName: 'MainTab',headerMode: 'float',transitionConfig:() => ({//screenInterpolater: screenInterpolaterscreenInterpolater: CardStackStyleInterpolator.forHorizontal})
}export default StackNavigationConfig;
四、TabNavigator.js
现在开始设置底部标签栏,注意第二步里面的MainTab就是在这个文件里定义的。
import { TabNavigator } from 'react-navigation'
import Home from './pages/Home'
import Live from './pages/Live'
import Mine from './pages/Mine'
import Video from './pages/Video'export default MainTab = TabNavigator({Home: {screen: Home,navigationOptions:({navigation, screeProps}) => ({//这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性//设置StackNavigator属性header:null,headerTitle: '首页',headerStyle: styles.navigator,headerTitleStyle: styles.navigatorTitle,gesturesEnabled:true,//这里设置Tabbar不同页面可能会不同的属性tabBarVisible: true,tabBarLabel:'首页',tabBarIcon:(({tintColor,focused}) => {return(<Image source={focused ? MainTabSelectedIcon : MainTabUnSelectedIcon}style={styles.tabbarImage} />)}),})},Live: {screen: Live,navigationOptions:({navigation, screeProps}) => ({//这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性//设置StackNavigator属性header:null,headerTitle: '直播',headerStyle:styles.navigator,headerTitleStyle:styles.navigatorTitle,gesturesEnabled:true,//这里设置Tabbar不同页面可能会不同的属性tabBarVisible: true,tabBarLabel:'直播',tabBarIcon:(({tintColor,focused}) => {return(<Image source={focused ? LiveTabSelectedIcon : LiveTabUnSelectedIcon}style={styles.tabbarImage} />)}),})},Video: {screen: Video,navigationOptions:({navigation, screeProps}) => ({//这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性//设置StackNavigator属性header:null,headerTitle: '视频',headerStyle:styles.navigator,headerTitleStyle:styles.navigatorTitle,gesturesEnabled:true,//这里设置Tabbar不同页面可能会不同的属性tabBarVisible: true,tabBarLabel:'视频',tabBarIcon:(({tintColor,focused}) => {return(<Image source={focused ? VideoTabSelectedIcon : VideoTabUnSelectedIcon}style={styles.tabbarImage} />)}),})},Mine: {screen: Mine,navigationOptions:({navigation, screeProps}) => ({//这里设置StackNavigator属性和一般情况下Tabbar不同页面可能会不同的属性//设置StackNavigator属性header:null,headerTitle: '我的',headerStyle:styles.navigator,headerTitleStyle:styles.navigatorTitle,gesturesEnabled:true,//这里设置Tabbar不同页面可能会不同的属性tabBarVisible: true,tabBarLabel:'我的',tabBarIcon:(({tintColor,focused}) => {return(<Image source={focused ? MineTabSelectedIcon : MineTabUnSelectedIcon}style={styles.tabbarImage} />)}),})}
},{//这里设置的是一般情况下Tabbar共同的属性tabBarPosition:'bottom', // 设置tabbar的位置,iOS默认在底部,安卓默认在顶部。(属性值:'top','bottom')swipeEnabled:false, // 是否允许在标签之间进行滑动。animationEnabled: false, // 是否在更改标签时显示动画。lazy:true, // 是否根据需要懒惰呈现标签,而不是提前制作,意思是在app打开的时候将底部标签栏全部加载,默认false,推荐改成true哦。initialRouteName:'', // 设置默认的页面组件backBehavior:'none', // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转tabBarOptions:{activeTintColor:'#d81e06', // label和icon的前景色 活跃状态下(选中)。inactiveTintColor:'#515151', // label和icon的前景色 不活跃状态下(未选中)。labelStyle:{fontSize: 12,}, //label的样式。}
})
五、完整代码:
这里有个用React Native实现网易新闻客户端的项目,里面除了使用了react-navigation外,还包括其他一些常用库的使用,需要的可以点击传送门>>>
react-navigation 使用教程(配完整项目)相关推荐
- 人工智能python+dlib+opencv技术10分钟实现抖音人脸变狗头详细图文教程和完整项目代码
效果展示 动态效果 静态效果 未完待续... 素材 项目讲解.代码和素材 https://blog.csdn.net/wyx100/article/details/80428424 开发环境 win7 ...
- 人脸检测和识别(中文标记)完整项目源代码(基于深度学习+python3.6+dlib+PIL+CNN+(tensorflow、keras)10分钟实现 区分欢乐颂中人物详细图文教程和完整项目代码)
转载请注明:https://blog.csdn.net/wyx100/article/details/80428424 效果展示 未完待续... 环境配置 win7sp1 python ...
- python画狗头_人工智能python+dlib+opencv技术10分钟实现抖音人脸变狗头详细图文教程和完整项目代码...
效果展示 动态效果 静态效果 未完待续... 素材 项目讲解.代码和素材 开发环境 win7sp1 python 3.6.3 dlib ...
- 如何实现抖音狗头,人工智能,附完整项目代码
详细见 人工智能python+dlib+opencv技术10分钟实现抖音人脸变狗头详细图文教程和完整项目代码 https://blog.csdn.net/wyx100/article/details/ ...
- [万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行,步骤有详解
[万字长文]使用 React 重写学成在线前端项目 I 代码完整可运行,步骤有详解 准备工作 安装必备工具/库 nodejs React 脚手架 需要的 node 依赖包 分析需求 初始化项目 搭建框 ...
- SwiftUI iOS 完整项目之基于CoreData构建购物计划App(教程含源码App Store上线app)
实战需求 SwiftUI iOS 完整项目之基于CoreData构建购物计划App(App Store上线app) 用我们从超市需要的东西来代替我们口袋里的废纸.只需输入您想要的项目.数量.任何额外备 ...
- 使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
- 如何使用React和Redux前端创建Rails项目
by Mark Hopson 马克·霍普森(Mark Hopson) 如何使用React和Redux前端(加上Typescript!)创建Rails项目 (How to create a Rails ...
- RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...
最新文章
- ICLR 2020 | ReClor: 一个需要逻辑推理的阅读理解数据集
- HDU 1847 Good Luck in CET-4 Everybody!(组合博弈)
- Google Chrome的CSS hack写法
- 补补算术基础:编程中的进制问题
- python正则group()的用法—正则提取括号内以及其他符号内内容
- 开始学习jQuery和准备工作
- 对于SpringMVC框架使用的时候出现“警告: No mapping found for HTTP request with URI [/login]”的问题解决方案...
- STM32H743+CubeMX-移植ThreadX
- Hadoop框架:HDFS读写机制与API详解
- 以一种标准的办法,获取工作目录
- 数据挖掘概念与技术——读书笔记(7)
- 单片机原理与应用技术(一)———51单片机延时汇编语言
- 电脑怎么用计算机打开指令,电脑常用快捷键及命令
- mysql数据一条复制_Mysql 复制一条数据
- 气球java游戏_团队游戏 气球
- 【第一组】第九次冲刺例会纪要
- linux here,here交友app-here官网版下载v1.0-Linux公社
- Android Calander Event
- 全球与中国苯二亚甲基二异氰酸酯(XDI)市场发展形势与未来前景分析报告2022-2028年
- 百合医疗IPO被终止:实控人黄凯之父黄维郭曾是佛山副市长