简介
React Native在0.44版本中将Navigator从核心库中删除,主要推荐使用于今年一月份开源的React-navigation库,据称有原生般的性能体验效果,可能成为未来React Native导航组件的主力军,下面我们来介绍下该组件的主要属性和方法.
这个库主要包含三类组件:
1. StackNavigator: 用来跳转页面和传递参数
2. TabNavigator: 类似底部导航栏,用来在同一个屏幕下切换不同界面
3. DrawerNavigator: 侧滑菜单导航栏,用于设置带抽屉导航的屏幕
官方文档: https://reactnavigation.org/docs/intro/
使用
1. 属性介绍:
1. StackNavigator属性介绍
navigationOptions：配置StackNavigator的一些属性。
title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，不推荐使用
header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
headerTitle：设置导航栏标题，推荐
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
headerRight：设置导航条右侧。可以是按钮或者其他视图控件
headerLeft：设置导航条左侧。可以是按钮或者其他视图控件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
StackNavigator(RouteConfigs, StackNavigatorConfig) 构造函数:
RouteConfigs: 主要是来配置页面路由的,所有的界面都必须配置在里面.
screen：对应界面名称，需要填入import之后的页面
StackNavigatorConfig: 主要是配置整个路由的，包括跳转动画，跳转方式等.
initialRouteName: 初始化哪个界面为根界面，如果不配置，默认使用RouteConfigs中的第一个页面当做根界面
initialRouteParams: 初始化根界面参数，主要是给根视图传递一些参数，通过this.props.navigation.state.params可以取到
navigationOptions: 配置默认的navigationOptions
mode: 跳转方式，一种是card，默认的，在iOS上是从右到左跳转，在Android上是从下到上，都是使用原生系统的默认跳转方式。一种是modal，只针对iOS平台，模态跳转。
headerMode: 跳转过程中，导航条的动画效果，有三个值，float表示会渐变，类似于iOS的原生效果，screen表示没有渐变。none表示隐藏导航条
cardStyle: 可以统一定义界面的颜色，例如背景色
transitionConfig：配置页面跳转的动画
onTransitionStart: 页面跳转动画即将开始的回调
nTransitionEnd: 页面跳转动画结束的回调
Navigation Prop
navigate：路由方法，主要来启动另一个页面
state：状态，其实StackNavigator内部维护了两个路由栈，一个名为newState，是当前显示页面之前的所有页面，包括当前界面。一个名为lastState，当然，通过state还能拿到很多参数。
setParams: 设置参数，记住，一定不要在render方法中调用此方法。
goBack: 返回
dispatch: 给当前界面设置action，会替换原来的跳转，回退等事件
navigate
这个方法可以传递三个参数: navigate(routeName, params, action)
routeName: 页面名称，一定要在路由配置中配置。
params: 传递参数到下一个页面
action: action
setParams
设置当前页面的参数，记住，调用此方法一定要在componentDidMount
componentDidMount() {
var {setParams} = this.props.navigation;
setParams({'haha':'abc'});
}
goBack
回退到指定界面，如果什么都不传，回退到上一个界面，传null，回退到任意界面。传key，可以回退到指定界面
this.props.navigation.goBack();
this.props.navigation.goBack(null);
this.props.navigation.goBack('Profile');
2. TabNavigator在iOS上默认类似于TabBar，在Android中类似于TabLayout:
构造方法:
TabNavigator(RouteConfigs, TabNavigatorConfig)
RouteConfigs: 配置路由,也可以配置navigationOptions,但是,在这里配置的优先级比在页面中配置的优先级高，所以，我们一般在单个页面中配置所有的navigationOptions。
screen：和导航的功能是一样的，对应界面名称，可以在其他页面通过这个screen传值和跳转。
TabNavigatorConfig:
1. tabBarComponent: 默认两种方式，TabBarBottom和TabBarTop，可以通过如下代码导入：import {TabBarBottom,TabBarTop} from 'react-navigation';，这两者的区别主要是样式和位置的区别，iOS上默认使用TabBarBottom，Android上默认使用TabBarTop。
2. tabBarPosition: 配置tab的位置，top和bottom
3. swipeEnabled: 是否可以滑动切换tab
4. animationEnabled: 点击选项卡切换界面是否需要动画
5. lazy: 是否懒加载界面，默认一次加载所有的界面，我们最好设置为true
6. tabBarOptions: tab的样式等配置，我们下面详细说
7. initialRouteName，第一次初始化哪个界面，默认初始化第一个。
8. order，tab排序，默认使用配置路由的顺序
9. paths: 配置path
10. backBehavior，当Android点击返回键的时候，做的处理，initialRoute返回到初始化的界面，none退出应用
tabBarOptions: 这个参数主要配置样式，针对TabBarBottom和TabBarTop。
TabBarBottom:
activeTintColor: 选中的文字颜色
activeBackgroundColor: 选中的背景色
inactiveTintColor： 未选中的文字颜色
inactiveBackgroundColor: 未选中的背景色
showLabel: 是否显示标题，默认显示
style: 定义item的样式
labelStyle: 标题的样式
TabBarTop:
activeTintColor: 选中的文字颜色
inactiveTintColor： 未选中的文字颜色
showIcon: 是否显示图标，默认显示
showLabel: 是否显示标题，默认显示
upperCaseLabel: 使用大写字母
pressColor: 定义颜色，大约Android5.0的一种按压效果
pressOpacity: 按压下去的透明度，在iOS或者Android5.0之前
scrollEnabled: 是否能够滚动，类似于今日头条的标题头
tabStyle: 定义item的样式
indicatorStyle: 指示器的颜色
labelStyle: 文字的样式
iconStyle: 图标的样式
style: 定义tab的样式
NavigationOptions: 配置tabBarItem的相关属性:
title: 标题
tabBarVisible: 是否可见
tabBarIcon: 配置图片，当然，完全可以不使用图片
tabBarLabel: 也是配置标题，只不过title既能配置tab的标题，也能配置navigation的标题
3. DrawerNavigator属性介绍:
navigationOptions: 配置侧滑显示的具体属性(必须写成这个名字),有以下参数
title：通用标题，当你不写drawerLabel时，使用此参数作为侧滑标题，通常都不写
drawerLabel：侧滑标题
drawerIcon：侧滑的标题图标，这里会回传两个参数，{focused: boolean, tintColor: string}，focused表示是否是选中状态，tintColor表示选中的颜色，这个颜色是我们自己在根视图定义的。当然，你也可以使用其他的组件来作为图标，比如Text组件。
打开侧滑方法: this.props.navigation.navigate('DrawerOpen')
关闭侧滑方法: this.props.navigation.navigate('DrawerClose')
构造方法:
DrawerNavigator(RouteConfigs, DrawerNavigatorConfig) 接收两个参数，一个为页面路由配置，一个为显示的配置.
RouteConfigs: 配置所有的界面
screen: 对应界面名称，可以在其他页面通过这个screen传值和跳转
DrawerNavigatorConfig
drawerWidth: 侧滑栏的宽度，如果你不想写死，可以使用Dimensions获取屏幕的宽度，动态计算
drawerPosition: 侧滑的方向，left和right，默认left
contentComponent - 用于呈现抽屉内容的组件，例如导航项 接收抽屉的导航。 默认为DrawerItems,可以自定义侧滑页
contentOptions: 主要配置侧滑栏条目的属性，针对DrawerItems,可以通过这个属性来设置颜色,背景颜色等
initialRouteName - 初始路由的routeName
order - 定义抽屉项目顺序的routeNames数组。
路径 - 提供routeName到路径配置的映射，它覆盖routeConfigs中设置的路径。
backBehavior - 后退按钮是否会切换到初始路由？ 如果是，设置为initialRoute，否则为none。 默认为initialRoute行为
DrawerItems的contentOptions属性
activeItemKey: 定义当前选中的页面的key
activeTintColor - 选中条目状态的文字颜色
activeBackgroundColor - 选中条目的背景色
inactiveTintColor - 未选中条目状态的文字颜色
inactiveBackgroundColor - 未选中条目的背景色
onItemPress: 选中条目的回调，这个参数属性为函数，会将当前路由回调过去
内容部分的样式样式对象
labelStyle - 当您的标签是字符串时，要覆盖内容部分中的文本样式的样式对象
二: 界面跳转,传值,取值
在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过this.props.navigation获取并进行一些操作。
- 通过navigate函数实现界面之间跳转:
this.props.navigation.navigate('Mine');
参数为我们在StackNavigator注册界面组件时的名称。同样也可以从当前页面返回到上一页：
this.props.navigation.goBack();
- 跳转时传值:
this.props.navigation.navigate('Mine',{info:'传值过去'});
第一个参数同样为要跳转的界面组件名称，第二个参数为要传递的参数，info可以理解为key，后面即传递的参数。
- 获取值:
{this.props.navigation.state.params.info}
通过state.params来获取传来的参数，后面为key值。此处为info。
网友评论