ReactNative进阶(七):导航组件react-navigation(react native导航栏)
前言
在RN项目开发过程中,经常会看到如下形式的路由跳转。
render() { return (
今天就结合RN官方推荐的路由导航组件react-navigation,深入了解下相关技能知识。
总览
React Native 中,官方推荐使用 react-navigation 来实现各个界面的跳转和不同板块的切换。react-navigation据称有原生般的性能体验效果。可能会成为未来React Native导航组件的主流军。主要有三部分组成:
1、StackNavigator: 类似于普通的Navigator,屏幕上方导航栏,用于实现各个页面之间的跳转;
2、TabNavigator: 相当于iOS里面的TabBarController,屏幕下方的标签栏,主要用于同一个页面上不同界面之间的切换;
3、 DrawerNavigator: 抽屉效果,侧边滑出;
StackNavigator 导航栏
StackNavigator(RouteConfigs, StackNavigatorConfig)
StackNavigator 组件采用堆栈式的页面导航来实现各个界面跳转。
首先如果想要使用StackNavigator,一定要先注册导航。
const Navigator = StackNavigator( { Tab: { screen: Tab }, Web: { screen: WebScene }, GroupPurchase: { screen: GroupPurchaseScene }, }, { navigationOptions: { // headerStyle: { backgroundColor: color.theme } headerBackTitle: null, headerTintColor: '#333333', showIcon: true, }, } );
这里给导航器配置了三个界面,如果需要更多界面,可以在之后进行添加。主要有一个用于主界面之间能够切换的Tab界面和其他两个能够展示数据的界面。
StackNavigatorConfig 导航器配置
initialRouteName - 导航器组件中初始显示页面的路由名称,如果不设置,则默认第一个路由页面为初始显示页面;
initialRouteParams - 给初始路由的参数,在初始显示的页面中可以通过this.props.navigation.state.params 来获取 navigationOptions -路由页面的配置选项,它会被 RouteConfigs 参数中navigationOptions 的对应属性覆盖;
paths -路由中设置的路径覆盖映射配置;
mode - 页面跳转方式,有 card 和 modal 两种,默认为 card :
card - 原生系统默认的的跳转,左右互换;
modal - 只针对iOS平台,模态跳转,上下切换;
headerMode - 页面跳转时,头部的动画模式,有 float 、 screen 、 none 三种:
float -渐变,类似iOS的原生效果,无透明;
screen - 标题与屏幕一起淡入淡出,如微信一样;
none - 没有动画;
cardStyle -为各个页面设置统一的样式,比如背景色,字体大小等;
transitionConfig - 配置页面跳转的动画,覆盖默认的动画效果;
onTransitionStart - 页面跳转动画即将开始时调用;
onTransitionEnd - 页面跳转动画一旦完成会马上调用;
代码示例:
const StackNavigatorConfig = { initialRouteName: 'Home', initialRouteParams: {initPara: '初始页面参数'}, navigationOptions: { title: '标题', headerTitleStyle: {fontSize: 18, color: '#666666'}, headerStyle: {height: 48, backgroundColor: '#'}, }, paths: 'page/main', mode: 'card', headerMode: 'screen', cardStyle: {backgroundColor: "#ffffff"}, transitionConfig: (() => ({ screenInterpolator: CardStackStyleInterpolator.forHorizontal, })), onTransitionStart: (() => { console.log('页面跳转动画开始'); }), onTransitionEnd: (() => { console.log('页面跳转动画结束'); }), };
navigationOptions 为对应路由页面的配置选项
title - 可以作为头部标题 headerTitle ,或者Tab标题 tabBarLabel;
header -自定义的头部组件,使用该属性后系统的头部组件会消失,如果想在页面中自定义,可以设置为null,这样就不会出现页面中留有一个高度为64 navigationBar的高度;
headerTitle - 头部的标题,即页面的标题 headerBackTitle - 返回标题,默认为 title;
headerTruncatedBackTitle - 返回标题不能显示时(比如返回标题太长了)显示此标题,默认为 “Back”;
headerRight - 头部右边组件;
headerLeft - 头部左边组件;
headerStyle - 头部组件的样式;
headerTitleStyle - 头部标题的样式;
headerBackTitleStyle - 头部返回标题的样式;
headerTintColor - 头部颜色 headerPressColorAndroid - Android 5.0以上MD风格的波纹颜色 ;
gesturesEnabled - 否能侧滑返回, iOS 默认 true , Android 默认 false;
使用示例
// 注册导航 const Navs = StackNavigator({ Home: { screen: Tabs }, HomeTwo: { screen: HomeTwo, // 必须, 其他都是非必须 path:'app/homeTwo', // 使用url导航时用到, 如 web app 和 Deep Linking navigationOptions: {} // 此处参数设置会覆盖组件内的`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 还可以在对应页面中去静态配置。
// 配置页面导航选项 static navigationOptions = ({navigation}) => ({ title: 'HOME', titleStyle: {color: '#ff00ff'}, headerStyle:{backgroundColor:'#000000'} }); render() { return (
在页面采用静态方式配置 navigationOptions 中的属性,会覆盖 StackNavigator 构造函数中两个参数 RouteConfigs 和 StackNavigatorConfig 配置的 navigationOptions 里面的对应属性。
navigationOptions 中属性的优先级是:
页面中静态配置 > RouteConfigs > StackNavigatorConfig
至此,就可以在组件中直接使用该配置了,当然我们也可以像文章开头提过的那样使用:
const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig); export default class Main extends Component { render() { return (
至此,我们已经配置好导航器和对应的路由页面,但是我们还需要navigation才能实现页面的跳转。
navigation 控制页面跳转
在导航器中的每一个页面,都有 navigation 属性,该属性有以下几个属性/方法,可以在组件下console.log(this.props)查看。
navigate - 跳转到其他页面;
state - 当前页面导航器的状态;
setParams - 更改路由的参数;
goBack - 返回;
dispatch - 发送一个action;
navigate
this.props.navigation.navigate(‘Two’, { name: ‘two’ }) // push下一个页面
routeName: 注册过的目标路由名称;
params: 传递的参数,传递到下一级界面 ;
action:如果该界面是一个navigator的话,将运行这个sub-action;
state
state 里面包含有传递过来的参数 params、key 、路由名称 routeName。
routeName: 路由名;
key: 路由身份标识;
params: 参数;
setParams
this.props.navigation.setParams
该方法允许界面更改router中的参数,可以用来动态更改导航栏的内容。比如可以用来更新头部的按钮或者标题。
goBack
返回上一页,可以不传参数,也可以传参数,还可以传 null 。
this.props.navigation.goBack(); // 回退到上一个页面 this.props.navigation.goBack(null); // 回退到任意一个页面 this.props.navigation.goBack('Home'); // 回退到Home页面
dispatch
this.props.navigation.dispatch
可以dispatch一些action,主要支持的action有:
1. 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 router action: NavigationActions.navigate({ routeName: 'SubProfileRoute'}) }) this.props.navigation.dispatch(navigationAction)
2. 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 params key: 'screen-123', }) this.props.navigation.dispatch(setParamsAction)
页面跳转,传值,回调传参
跳转,传值
const {navigate} = this.props.navigation;
// 返回上一页 this.props.navigation.goBack();
在下一界面接收参数
通过 this.props.navigation.state.params 接收参数
export default class Home1 extends Component { static navigationOptions = { // title 可以这样设置成一个函数, state 会自动传过来 title: ({state}) => `${state.params.name}`, }; componentDidMount() { const {params} = this.props.navigation.state; const id = params.id; } }
回调传参
当前界面进行跳转
navigate('Detail',{ // 跳转的时候携带一个参数去下个页面 callback: (data)=>{ console.log(data); // 打印值为:'回调参数' } });
下一界面在返回之前传参
const {navigate,goBack,state} = this.props.navigation; // 在第二个页面,在goBack之前,将上个页面的方法取到,并回传参数,这样回传的参数会重走render方法 state.params.callback('回调参数'); goBack();
TabNavigator 即Tab选项卡
TabNavigator(RouteConfigs, TabNavigatorConfig)
api和 StackNavigator 类似,参数 RouteConfigs 是路由配置,参数 TabNavigatorConfig是Tab选项卡配置。
RouteConfigs 路由配置
路由配置和 StackNavigator 中是一样的,配置路由以及对应的 screen 页面,navigationOptions 为对应路由页面的配置选项:
title - Tab标题,可用作headerTitle 和 tabBarLabel 回退标题;
tabBarVisible -Tab是否可见,没有设置的话默认为 true;
tabBarIcon - Tab的icon组件,可以根据 {focused:boolean, tintColor: string} 方法来返回一个icon组件;
tabBarLabel -Tab中显示的标题字符串或者组件,也可以根据 { focused: boolean, tintColor: string };方法返回一个组件;
代码示例:
Mine: { screen: MineScene, navigationOptions: ({ navigation }) => ({ tabBarLabel: '我的', tabBarIcon: ({ focused, tintColor }) => (
TabBarItem自定义组件
class TabBarItem extends PureComponent { render() { let selectedImage = this.props.selectedImage ? this.props.selectedImage : this.props.normalImage return (
TabNavigatorConfig Tab选项卡配置
tabBarComponent - Tab选项卡组件,有 TabBarBottom 和 TabBarTop 两个值,在iOS中默认为 TabBarBottom ,在Android中默认为 TabBarTop 。
TabBarTop - 在页面顶部;
TabBarBottom - 在页面底部;
tabBarPosition - Tab选项卡的位置,有top或bottom两个值
top:上面
bottom:下面
swipeEnabled - 是否可以滑动切换Tab选项卡;
animationEnabled - 点击Tab选项卡切换界面是否需要动画;
lazy - 是否懒加载页面;
initialRouteName - 初始显示的Tab对应的页面路由名称;
order - 用路由名称数组来表示Tab选项卡的顺序,默认为路由配置顺序;
paths - 路径配置;
backBehavior - android点击返回键时的处理,有 initialRoute 和 none 两个值:
initailRoute - 返回初始界面;
none - 退出;
tabBarOptions - Tab配置属性,用在TabBarTop和TabBarBottom时有些属性不一致:
用于 TabBarTop 时:
activeTintColor - 选中的文字颜色;
inactiveTintColor - 未选中的文字颜色;
showIcon -是否显示图标,默认显示;
showLabel - 是否显示标签,默认显示;
upperCaseLabel - 是否使用大写字母,默认使用;
pressColor - android 5.0以上的MD风格波纹颜色;
pressOpacity - android5.0以下或者iOS按下的透明度;
scrollEnabled - 是否可以滚动;
tabStyle - 单个Tab的样式;
indicatorStyle - 指示器的样式;
labelStyle - 标签的样式;
iconStyle - icon的样式;
style -整个TabBar的样式;
用于 TabBarBottom 时:
activeTintColor - 选中Tab的文字颜色;
inactiveTintColor - 未选中Tab的的文字颜色;
activeBackgroundColor - 选中Tab的背景颜色;
inactiveBackgroundColor -未选中Tab的背景颜色;
showLabel - 是否显示标题,默认显示;
style - 整个TabBar的样式;
labelStyle -标签的样式;
tabStyle - 单个Tab的样式;
使用底部选项卡:
import React, {Component} from 'react'; import {StackNavigator, TabBarBottom, TabNavigator} from "react-navigation"; import HomeScreen from "./index18/HomeScreen"; import NearByScreen from "./index18/NearByScreen"; import MineScreen from "./index18/MineScreen"; import TabBarItem from "./index18/TabBarItem"; export default class MainComponent extends Component { render() { return (
使用顶部选项卡:
import React, {Component} from "react"; import {StackNavigator, TabBarTop, TabNavigator} from "react-navigation"; import HomeScreen from "./index18/HomeScreen"; import NearByScreen from "./index18/NearByScreen"; import MineScreen from "./index18/MineScreen"; export default class MainComponent extends Component { render() { return (
DrawerNavigator 抽屉导航
有一些APP都会采用侧滑抽屉来实现主页面导航,利用 DrawerNavigator 在RN中可以很方便实现抽屉导航。
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
和TabNavigator的构造函数一样,参数配置也类似。
RouteConfigs
抽屉导航的路由配置 RouteConfigs ,和 TabNavigator 的路由配置完全一样, screen 对应路由页面配置, navigationOptions 对应页面的抽屉配置:
title - 抽屉标题,和 headerTitle 、 drawerLabel 一样;
drawerLabel -标签字符串,或者自定义组件, 可以根据 { focused: boolean, tintColor: string }函数来返回一个自定义组件作为标签;
drawerIcon - 抽屉icon,可以根据 { focused: boolean,tintColor: string } 函数来返回一个自定义组件作为icon ;
DrawerNavigatorConfig 属性配置
drawerWidth - 抽屉宽度,可以使用Dimensions获取屏幕宽度,实现动态计算;
drawerPosition -抽屉位置,可以是 left 或者 right;
contentComponent - 抽屉内容组件,可以自定义侧滑抽屉中的所有内容,默认为DrawerItems;
contentOptions - 用来配置抽屉内容的属性。当用来配置 DrawerItems 是配置属性选项:
items - 抽屉栏目的路由名称数组,可以被修改;
activeItemKey - 当前选中页面的key id;
activeTintColor - 选中条目状态的文字颜色;
activeBackgroundColor - 选中条目的背景色;
inactiveTintColor - 未选中条目状态的文字颜色;
inactiveBackgroundColor - 未选中条目的背景色
onItemPress(route) - 条目按下时会调用此方法;
style - 抽屉内容的样式;
labelStyle -抽屉的条目标题/标签样式;
initialRouteName - 初始化展示的页面路由名称;
order -抽屉导航栏目顺序,用路由名称数组表示;
paths - 路径;
backBehavior -android点击返回键时的处理,有initialRoute和none两个值:
initailRoute:返回初始界面;
none :退出
抽屉导航示例:
import React, {Component} from 'react'; import {DrawerNavigator, StackNavigator, TabBarBottom, TabNavigator} from "react-navigation"; import HomeScreen from "./index18/HomeScreen"; import NearByScreen from "./index18/NearByScreen"; import MineScreen from "./index18/MineScreen"; import TabBarItem from "./index18/TabBarItem"; export default class MainComponent extends Component { render() { return (
扩展功能
默认DrawerView不可滚动。要实现可滚动视图,必须使用contentComponent自定义容器:
{ drawerWidth:200, 抽屉位置:“对” contentComponent:props =>
可以覆盖导航使用的默认组件,使用DrawerItems自定义导航组件:
import {DrawerItems} from 'react-navigation'; const CustomDrawerContentComponent = (props) => (
嵌套抽屉导航
如果嵌套DrawerNavigation,抽屉将显示在父导航下方。
自定义react-navigation适配顶部导航栏标题
测试中发现,在iphone上标题栏的标题为居中状态,而在Android上则是居左对齐。所以需要修改源码,进行适配。
【node_modules – react-navigation – src – views – Header.js】的326行代码处,修改为如下:
title: { bottom: 0, left: TITLE_OFFSET, right: TITLE_OFFSET, top: 0, position: 'absolute', alignItems: 'center', }
上面方法通过修改源码的方式其实略有弊端,毕竟扩展性不好。还有另外一种方式就是,在navigationOptions中设置headerTitleStyle的alignSelf为 ’ center ‘即可解决。
去除返回键文字显示
【node_modules – react-navigation – src – views – HeaderBackButton.js】的91行代码处,修改为如下即可。
{ Platform.OS === 'ios' && title &&
动态设置头部按钮事件
当我们在头部设置左右按钮时,肯定避免不了要设置按钮的单击事件,但是此时会有一个问题,navigationOptions是被修饰为static类型的,所以在按钮的onPress方法中不能直接通过this来调用Component中的方法。如何解决呢?
componentDidMount () { /** * 将单击回调函数作为参数传递 */ this.props.navigation.setParams({ switch: () => this.switchView() }); } /** * 切换视图 */ switchView() { alert('切换') } static navigationOptions = ({navigation,screenProps}) => ({ headerTitle: '企业服务', headerTitleStyle: CommonStyles.headerTitleStyle, headerRight: (
结合BackHandler处理返回和点击返回键两次退出App效果
点击返回键两次退出App效果的需求屡见不鲜。相信很多人在react-navigation下实现该功能都遇到了很多问题,例如,其他界面不能返回。也就是手机本身返回事件在react-navigation之前拦截了。如何结合react-natigation实现呢?和大家分享两种实现方式:
(1)在注册StackNavigator的界面中,注册BackHandler
componentWillMount(){ BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid ); } componentUnWillMount(){ BackHandler.addEventListener('hardwareBackPress', this._onBackAndroid); } _onBackAndroid=()=>{ let now = new Date().getTime(); if(now - lastBackPressed < 2500) { return false; } lastBackPressed = now; ToastAndroid.show('再点击一次退出应用',ToastAndroid.SHORT); return true; }
(2)监听react-navigation的Router
/** * 处理安卓返回键 */ const defaultStateAction = AppNavigator.router.getStateForAction; AppNavigator.router.getStateForAction = (action,state) => { if(state && action.type === NavigationActions.BACK && state.routes.length === 1) { if (lastBackPressed + 2000 < Date.now()) { ToastAndroid.show(Constant.hint_exit,ToastAndroid.SHORT); lastBackPressed = Date.now(); const routes = [...state.routes]; return { ...state, ...state.routes, index: routes.length - 1, }; } } return defaultStateAction(action,state); };
实现Android中界面跳转左右切换动画
react-navigation在android中默认的界面切换动画是上下。如何实现左右切换呢?很简单的配置即可:
import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
然后在StackNavigator配置下添加如下代码:
transitionConfig:()=>({ screenInterpolator: CardStackStyleInterpolator.forHorizontal, })
解决快速点击多次跳转
当我们快速点击跳转时,会开启多个重复的界面,如何解决呢?其实在官方Git中也有提示,解决这个问题需要修改react-navigation源码。
找到scr文件夹中的addNavigationHelpers.js文件,替换为如下文本即可:
export default function) { // 添加点击判断 let debounce = true; return { ...navigation, goBack: (key?: ?string): boolean => navigation.dispatch( NavigationActions.back({ key: key === undefined ? navigation.state.key : key, }), ), navigate: (routeName: string, params?: NavigationParams, action?: NavigationAction,): boolean => { if (debounce) { debounce = false; navigation.dispatch( NavigationActions.navigate({ routeName, params, action, }), ); setTimeout( () => { debounce = true; }, 500, ); return true; } return false; }, /** * For updating current route params. For example the nav bar title and * buttons are based on the route params. * This means `setParams` can be used to update nav bar for example. */ setParams: (params: NavigationParams): boolean => navigation.dispatch( NavigationActions.setParams({ params, key: navigation.state.key, }), ), }; }
iOS NAT React
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。