在 React Native
中,官方已经推荐使用 react-navigation
来实现各个界面的跳转和不同板块的切换。 react-navigation
主 要包括三个组件:
StackNavigator
导航组件TabNavigator
切换组件DrawerNavigator
抽屉组件StackNavigator
用于实现各个页面之间的跳转, TabNavigator
用来实现同一个页面上不同界面的切换, DrawerNavigator
可以实现侧滑的抽屉效果。
StackNavigator
组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数:
StackNavigator(RouteConfigs, StackNavigatorConfig)
有 RouteConfigs
和 StackNavigatorConfig
两个参数。
RouteConfigs
参数表示各个页面路由配置,类似于android原生开发中的 AndroidManifest.xml
,它是让导航器知道需要导航的路由对应的页面。
const RouteConfigs = {
Home: {
screen: HomePage,
navigationOptions: ({navigation}) => ({
title: '首页',
}),
},
Find: {
screen: FindPage,
navigationOptions: ({navigation}) => ({
title: '发现',
}),
},
Mine: {
screen: MinePage,
navigationOptions: ({navigation}) => ({
title: '我的',
}),
},
};
这里给导航器配置了三个页面, Home
、 Find
、 Mine
为路由名称, screen
属性值 HomePage
、 FindPage
、 MinePage
为对应路由的页面。
navigationOptions
为对应路由页面的配置选项:
title
- 可以作为头部标题 headerTitle
,或者Tab标题 tabBarLabel
header
- 自定义的头部组件,使用该属性后系统的头部组件会消失headerTitle
- 头部的标题,即页面的标题headerBackTitle
- 返回标题,默认为 title
headerTruncatedBackTitle
- 返回标题不能显示时(比如返回标题太长了)显示此标题,默认为 “Back”
headerRight
- 头部右边组件headerLeft
- 头部左边组件headerStyle
- 头部组件的样式headerTitleStyle
- 头部标题的样式headerBackTitleStyle
- 头部返回标题的样式headerTintColor
- 头部颜色headerPressColorAndroid
- Android 5.0
以上MD风格的波纹颜色gesturesEnabled
- 否能侧滑返回, iOS
默认 true
, Android
默认 false
StackNavigatorConfig
参数表示导航器的配置,包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等:
const StackNavigatorConfig = {
initialRouteName: 'Home',
initialRouteParams: {initPara: '初始页面参数'},
navigationOptions: {
title: '标题',
headerTitleStyle: {fontSize: 18, color: '#666666'},
headerStyle: {height: 48, backgroundColor: '#fff'},
},
paths: 'page/main',
mode: 'card',
headerMode: 'screen',
cardStyle: {backgroundColor: "#ffffff"},
transitionConfig: (() => ({
screenInterpolator: CardStackStyleInterpolator.forHorizontal,
})),
onTransitionStart: (() => {
console.log('页面跳转动画开始');
}),
onTransitionEnd: (() => {
console.log('页面跳转动画结束');
}),
};
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
- 页面跳转动画一旦完成会马上调用页面的配置选项 navigationOptions
通常还可以在对应页面中去静态配置,比如在 HomePage
页面中:
export default class HomePage extends Component {
// 配置页面导航选项
static navigationOptions = ({navigation}) => ({
title: 'HOME',
titleStyle: {color: '#ff00ff'},
headerStyle:{backgroundColor:'#000000'}
});
render() {
return (
<View>View>
)
};
}
同样地,在页面里面采用静态的方式配置 navigationOptions
中的属性,会覆盖 StackNavigator
构造函数中两个参数 RouteConfigs
和 StackNavigatorConfig
配置的 navigationOptions
里面的对应属性。 navigationOptions
中属性的优先级是:
页面中静态配置 > RouteConfigs
> StackNavigatorConfig
有了 RouteConfigs
和 StackNavigatorConfig
两个参数,就可以构造出一个导航器组件 StackNavigator
,直接引用该组件:
const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);
export default class MainComponent extends Component {
render() {
return (
<Navigator/>
)
};
}
已经配置好导航器以及对应的路由页面了,但是要完成页面之间的跳转,还需要 navigation
。
在导航器中的每一个页面,都有 navigation
属性,该属性有以下几个属性/方法:
navigate
- 跳转到其他页面state
- 当前页面导航器的状态setParams
- 更改路由的参数goBack
- 返回dispatch
- 发送一个action调用这个方法可以跳转到导航器中的其他页面,此方法有三个参数:
— routeName
导航器中配置的路由名称
— params
传递参数到下一个页面
— action
action
比如: this.props.navigation.navigate('Find', {param: 'i am the param'});
state
里面包含有传递过来的参数 params
、 key
、路由名称 routeName
,打印log可以看得到:
{
params: { param: 'i am the param' },
key: 'id-1500546317301-1',
routeName: 'Mine'
}
更改当前页面路由的参数,比如可以用来更新头部的按钮或者标题。
componentDidMount() {
this.props.navigation.setParams({param:'i am the new param'})
}
回退,可以不传,也可以传参数,还可以传 null
。
this.props.navigation.goBack(); // 回退到上一个页面
this.props.navigation.goBack(null); // 回退到任意一个页面
this.props.navigation.goBack('Home'); // 回退到Home页面
TabNavigator
,即是Tab选项卡,类似于原生 android
中的 TabLayout
,它的构造函数:
TabNavigator(RouteConfigs, TabNavigatorConfig)
api和 StackNavigator
类似,参数 RouteConfigs
是路由配置,参数 TabNavigatorConfig
是Tab选项卡配置。
路由配置和 StackNavigator
中是一样的,配置路由以及对应的 screen
页面, navigationOptions
为对应路由页面的配置选项:
title
- Tab标题,可用作 headerTitle
和 tabBarLabel
回退标题tabBarVisible
- Tab的是否可见,没有设置的话默认为 true
tabBarIcon
- Tab的icon组件,可以根据 {focused: boolean, tintColor: string}
方法来返回一个icon组件tabBarLabel
- Tab中显示的标题字符串或者组件,也可以根据 { focused: boolean, tintColor: string }
方法返回一个组件tabBarComponent
- Tab选项卡组件,有 TabBarBottom
和 TabBarTop
两个值,在iOS中默认为 TabBarBottom
,在Android中默认为 TabBarTop
。
TabBarTop
- 在页面的顶部TabBarBottom
- 在页面的底部tabBarPosition
- Tab选项卡的位置,有 top
或 bottom
两个值swipeEnabled
- 是否可以滑动切换Tab选项卡animationEnabled
- 点击Tab选项卡切换界面是否需要动画lazy
- 是否懒加载页面initialRouteName
- 初始显示的Tab对应的页面路由名称order
- 用路由名称数组来表示Tab选项卡的顺序,默认为路由配置顺序paths
- 路径配置backBehavior
- androd点击返回键时的处理,有 initialRoute
和 none
两个值
initailRoute
- 返回初始界面none
- 退出tabBarOptions
- Tab配置属性,用在 TabBarTop
和 TabBarBottom
时有些属性不一致:
TabBarTop
时:
activeTintColor
- 选中的文字颜色inactiveTintColor
- 未选中的文字颜色showIcon
- 是否显示图标,默认显示showLabel
- 是否显示标签,默认显示upperCaseLabel
- 是否使用大写字母,默认使用pressColor
- android 5.0以上的MD风格波纹颜色pressOpacity
- android 5.0以下或者iOS按下的透明度scrollEnabled
- 是否可以滚动tabStyle
- 单个Tab的样式indicatorStyle
- 指示器的样式labelStyle
- 标签的样式iconStyle
- icon的样式style
- 整个TabBar的样式TabBarBottom
时:
activeTintColor
- 选中Tab的文字颜色activeBackgroundColor
- 选中Tab的背景颜色inactiveTintColor
- 未选中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 (
);
}
}
const TabRouteConfigs = {
Home: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
tabBarLabel: '首页',
tabBarIcon: ({focused, tintColor}) => (
require('./img/tabbar/pfb_tabbar_homepage_2x.png')}
selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected_2x.png')}
/>
),
}),
},
NearBy: {
screen: NearByScreen,
navigationOptions: {
tabBarLabel: '附近',
tabBarIcon: ({focused, tintColor}) => (
require('./img/tabbar/pfb_tabbar_merchant_2x.png')}
selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected_2x.png')}
/>
),
},
}
,
Mine: {
screen: MineScreen,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({focused, tintColor}) => (
require('./img/tabbar/pfb_tabbar_mine_2x.png')}
selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected_2x.png')}
/>
),
},
}
};
const TabNavigatorConfigs = {
initialRouteName: 'Home',
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
lazy: true,
};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const StackRouteConfigs = {
Tab: {
screen: Tab,
}
};
const StackNavigatorConfigs = {
initialRouteName: 'Tab',
navigationOptions: {
title: '标题',
headerStyle: {backgroundColor: '#5da8ff'},
headerTitleStyle: {color: '#333333'},
}
};
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);
在原生Android MD 风格里面很多app都会采用侧滑抽屉来做主页面的导航,利用 DrawerNavigator
在RN中可以很方便来实现抽屉导航。
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)
和 DrawerNavigator
的构造函数一样,参数配置也类似。
抽屉导航的路由配置 RouteConfigs
,和 TabNavigator
的路由配置完全一样, screen
配置对应路由页面, navigationOptions
为对应页面的抽屉配置选项:
title
- 抽屉标题,和 headerTitle
、 drawerLabel
一样drawerLabel
- 标签字符串,或者自定义组件, 可以根据 { focused: boolean, tintColor: string }
函数来返回一个自定义组件作为标签drawerIcon
- 抽屉icon,可以根据 { focused: boolean, tintColor: string }
函数来返回一个自定义组件作为icon抽屉配置项属性:
drawerWidth
- 抽屉宽度,可以使用Dimensions获取屏幕的宽度,动态计算drawerPosition
- 抽屉位置,可以是 left
或者 right
contentComponent
- 抽屉内容组件,可以自定义侧滑抽屉中的所有内容,默认为 DrawerItems
contentOptions
- 用来配置抽屉内容的属性。当用来配置 DrawerItems
是配置属性选项:
items
- 抽屉栏目的路由名称数组,可以被修改activeItemKey
- 当前选中页面的key idactiveTintColor
- 选中条目状态的文字颜色activeBackgroundColor
- 选中条目的背景色inactiveTintColor
- 未选中条目状态的文字颜色inactiveBackgroundColor
- 未选中条目的背景色onItemPress(route)
- 条目按下时会调用此方法style
- 抽屉内容的样式labelStyle
- 抽屉的条目标题/标签样式initialRouteName
- 初始化展示的页面路由名称order
- 抽屉导航栏目顺序,用路由名称数组表示paths
- 路径backBehavior
- androd点击返回键时的处理,有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 (
);
}
}
const DrawerRouteConfigs = {
Home: {
screen: HomeScreen,
navigationOptions: ({navigation}) => ({
drawerLabel : '首页',
drawerIcon : ({focused, tintColor}) => (
require('./img/tabbar/pfb_tabbar_homepage_2x.png')}
selectedImage={require('./img/tabbar/pfb_tabbar_homepage_selected_2x.png')}
/>
),
}),
},
NearBy: {
screen: NearByScreen,
navigationOptions: {
drawerLabel : '附近',
drawerIcon : ({focused, tintColor}) => (
require('./img/tabbar/pfb_tabbar_merchant_2x.png')}
selectedImage={require('./img/tabbar/pfb_tabbar_merchant_selected_2x.png')}
/>
),
},
},
Mine: {
screen: MineScreen,
navigationOptions: {
drawerLabel : '我的',
drawerIcon : ({focused, tintColor}) => (
require('./img/tabbar/pfb_tabbar_mine_2x.png')}
selectedImage={require('./img/tabbar/pfb_tabbar_mine_selected_2x.png')}
/>
),
},
}
};
const DrawerNavigatorConfigs = {
initialRouteName: 'Home',
tabBarComponent: TabBarBottom,
tabBarPosition: 'bottom',
lazy: true,
tabBarOptions: {}
};
const Drawer = DrawerNavigator(DrawerRouteConfigs, DrawerNavigatorConfigs);
const StackRouteConfigs = {
Drawer: {
screen: Drawer,
}
};
const StackNavigatorConfigs = {
initialRouteName: 'Drawer',
navigationOptions: {
title: '标题',
headerStyle: {backgroundColor: '#5da8ff'},
headerTitleStyle: {color: '#333333'},
}
};
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);