react-navigation使用心得
官网地址:https://reactnavigation.org
一、主要构成:
(1) StackNavigator: 类似于普通的Navigator,屏幕上方导航栏
(2) TabNavigator: 相当于iOS里面的TabBarController,屏幕下方的标签栏
(3) DrawerNavigator: 抽屉效果,侧边滑出
三个种类的Navigator功能强大,RN创建的app使用react-navigation,可以很好地搭建出页面架构。
二、搭建含有下方tab和上方导航的框架
首先先看看两个组件的api:
StackNavigator
API: StackNavigator(RouteConfigs, StackNavigatorConfig)
参数:RouteConfigs,StackNavigatorConfig
TabNavigator
API:TabNavigator(RouteConfigs, TabNavigatorConfig)
参数:RouteConfigs,TabNavigatorConfig
通常我们先创建TabNavigator,再将生成的TabNavigator给StackNavigator作为主页面:
//生成TabNavigator
let TabNav = TabNavigator(MainTabRoute, TabOpt)
//生成StackNavigator
let StackNav = StackNavigator({
//注册一个Root页面
Root: {
//TabNavigator作为Root的screen
screen: TabNav,
navigationOptions: {
header: false
}
},
...MainTabRoute, //这里通常配置一些Route,
...UserRoute, //可以配置多个
...OtherRoute,
}, StackOpt);
}
//TabOpt,StackOpt为相应的配置,具体字段查阅文档。
1)StackNavigatorConfig (上面StackOpt部分)
参数:
- initialRouteName: 设置默认的页面组件,必须是上面已注册的页面组件(上面的代码中,我们注册了Root,则可以initialRouteName:’Root’)
- initialRouteParams: 初始路由的参数
- navigationOptions: 屏幕导航的默认选项(这个是导航栏的设置,下面会单独列举他的参数)
- paths: RouteConfigs里面路径设置的映射
- mode: 页面切换模式: 左右是card(相当于iOS中的push效果), 上下是- - modal(相当于iOS中的modal效果)
- card: 普通app常用的左右切换
- modal: 上下切换
- headerMode: 导航栏的显示模式: screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏
- float: 无透明效果, 默认
- screen: 有渐变透明效果, 如微信QQ的一样
- none: 隐藏导航栏
- cardStyle: 样式(iOS上页面切换会有白色渐变蒙层,想去掉则可以这样设置,cardStyle: { opacity: null },切换页面时的页面边框也在这里可以设置)
- onTransitionStart: 页面切换开始时的回调函数 (我们可以在这里注册一些通知,告知我们切面切换的状态,方便后面处理页面切换事件)
- onTransitionEnd: 页面切换结束时的回调函数
2)navigationOptions(StackNavigatorConfig的一个参数)
参数:
- title: 导航栏的标题
- header: 导航栏设置对象(自定义导航栏时使用)
- visible: 导航栏是否显示
- title: 导航栏的标题, 可以是字符串也可以是个组件
- backTitle: 左上角的返回键文字, 默认是上一个页面的title
- right: 导航栏右按钮
- left: 导航栏左按钮
- style: 导航栏的style
- titleStyle: 导航栏的title的style
- tintColor: 导航栏颜色
- cardStack: 配置card stack
- gesturesEnabled: 是否允许右滑返回,在iOS上默认为true,在Android上默认为false
3)TabNavigatorConfig
- animationEnabled: false, // 切换页面时是否有动画效果
- tabBarPosition: ‘bottom’, // 显示在底端,android 默认是显示在页面顶端的
- swipeEnabled: false, // 是否可以左右滑动切换tab
- backBehavior: ‘none’, // 按 back 键是否跳转到第一个Tab(首页), none 为不跳转
- tabBarOptions:tabBarOptions样式
4)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: { // 样式
}
}
});
三、Screen Navigation Prop
在StackNavigator中注册后的组件都有navigation这个属性.
navigation又有5个方法:navigate, goBack, state, setParams, dispatch
1)navigate - Link to other screens
navigate(routeName, params, action)
- routeName: 注册过的目标路由名称
- params: 传递的参数
- action: 如果该界面是一个navigator的话,将运行这个sub-action
const {navigate} = this.props.navigation;
return (
<View>
<Text>This is the home screen of the app</Text>
<Button
onPress={() => navigate('Profile', {name: 'Brent'})}
title="Go to Brent's profile"
/>
</View>
)
2)state - The screen’s current state/route
const {state} = this.props.navigation; //拿到navigate(routeName, params, action)中的params参数
<Text>Name: {state.params.name}</Text>
3)setParams - Make changes to route params
const {setParams} = this.props.navigation;
<Button
onPress={() => setParams({name: 'Lucy'})}
title="Set title name to 'Lucy'"
/>
4)goBack - Close the active screen and move back
const {goBack} = this.props.navigation;
<Button
onPress={() => goBack()}
title="Go back from this HomeScreen"
/>
5)dispatch - Send an action to the router
//调用navigate的action
this.props.navigation.dispatch(navigateAction)
四、Navigation Actions
The following actions are supported:
- Navigate - Navigate to another route
- Reset - Replace current state with a new state
- Back - Go back to previous state
- Set Params - Set Params for given route
- Init - Used to initialize first state if state is undefined
五、路由设置
'Home': {
screen: require('./Home').default,
path: 'Home',
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: (iconAttr) => crtIcon(iconAttr, 'home')
},
},
'Other': {
screen: require('./Other').default,
path: 'Other',
navigationOptions: {
tabBarLabel: '其他',
tabBarIcon: (iconAttr) => crtIcon(iconAttr, 'position')
},
},
'My': {
screen: require('./My').default,
path: 'My',
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: (iconAttr) => crtIcon(iconAttr, 'user')
},
},
'My/one': {
screen: require('./one').default,
path: 'My/one',
navigationOptions: {
header: false
},
},
'My/two': {
screen: require('./two').default,
path: 'My/two',
navigationOptions: {
title: '页面2'
},
},
'My/three': {
screen: require('./three').default,
path: 'My/three',
navigationOptions: {
title: '页面3'
},
},