react-navigation 之 createStackNigator
简介:
createStackNavigator
提供APP屏幕之间切换的能力,它是以栈的形式还管理屏幕之间的切换,新切换到的屏幕会放在栈的顶部。
屏幕转场风格:
默认情况下,createStackNavigator提供了转场过渡效果,在Android和iOS上过渡效果是不同的,这也是React Native重平台性的一个体现,在Android上从屏幕底部淡入,在iOS上是从屏幕的右侧划入,当然你也可以通过配置让StackNavigator支持屏幕从底部滑入的效果。
createStackNavigator API
createStackNavigator(RouteConfigs, StackNavigatorConfig):
- RouteConfigs(必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈现什么。
- StackNavigatorConfig(可选):配置导航器的路由(如:默认首屏,navigationOptions,paths等)样式(如,转场模式mode、头部模式等)。
从createStackNavigator API上可以看出createStackNavigator
支持通过RouteConfigs
和 StackNavigatorConfig
两个参数来创建createStackNavigator导航器。
RouterConfigs
screen
(必选):指定一个 React 组件作为屏幕的主要显示内容,当这个组件被createStackNavigator加载时,它会被分配一个navigation
prop。
path
(可选):用来设置支持schema跳转时使用,具体使用会在下文的有关Schema
章节中讲到;
navigationOptions
(可选):用以配置全局的屏幕导航选项如:title、headerRight、headerLeft等;
-navigationOptions (屏幕导航选项)
- title: 可以作为headerTitle的备选字段(当没设置headerTitle时会用该字段作为标题),也可以作为TabNavigator的tabBarLabel以及DrawerNavigator的drawerLabel。
- header: 自定义导航条,可以通过设置null来隐藏导航条;
- headerTitle: 标题;
- headerTitleAllowFontScaling: 标题是否允许缩放,默认true;
- headerBackTitle: 定义在iOS上当前页面进入到下一页面的回退标题,可以通过设置null来禁用它;
- headerTruncatedBackTitle: 当回退标题不能显示的时候显示此属性的标题,比如回退标题太长了;
- headerBackImage:React 元素或组件在标题的后退按钮中显示自定义图片。 当组件被调用时,它会在渲染时收到许多 props 如:(tintColor,title)。 默认为带有 react-navigation/views/assets/back-icon.png 这张图片的组件,后者是平台的默认后图标图像(iOS上为向左的符号,Android上为箭头)。
- headerRight: 定义导航栏右边视图;
- headerLeft: 定义导航栏左边视图;
- headerStyle: 定义导航栏的样式,比如背景色等;
- headerTitleStyle: 定义标题的样式;
- headerLeftContainerStyle:自定义 headerLeft 组件容器的样式,例如,增加 padding。
- headerRightContainerStyle:自定义 headerRight 组件容器的样式,,例如,增加 padding。
- headerTitleContainerStyle:自定义 headerTitle 组件容器的样式, 例如,增加 padding。
- headerBackTitleStyle: 定义返回标题的样式;
- headerPressColorAndroid:颜色为材料波纹 (Android >= 5.0);
- headerTintColor: 定义导航条的tintColor,会覆盖headerTitleStyle中的颜色;
- headerTransparent:默认为 false。如果 true, 则标头将不会有背景, 除非您显式提供 headerStyle 或 headerBackground。
- headerBackground:与headerTransparent一起使用,以提供在标题后台呈现的组件。 例如,您可以使用模糊视图来创建半透明标题。
- gesturesEnabled: 定义是否能侧滑返回,iOS默认true,Android默认false;
- gestureResponseDistance: 定义滑动返回的有效距离,水平状态下默认:25,垂直状态默认135;
- gestureDirection: 设置关闭手势的方向。默认从左向右,可以设置从右到左的滑动操作。