提供一种将新屏放在栈顶的屏幕切换方式。
译注 : 本文中屏幕切换，变换，过渡指的都是一个意思，对应英文 screen transition 。
缺省情况下，苹果和安卓上，StackNavigator被配置得有类似的外观和感觉：苹果iOS系统上新屏幕从右侧滑出，安卓平台上新屏幕从底部淡出。苹果iOS平台上StackNavigator也可以被配置成模态样式，屏幕从底部滑出。
API定义
StackNavigator(RouteConfigs, StackNavigatorConfig);RouteConfigs
RouteConfigs是一个路由配置对象，对每个路由名称指定路由配置，告诉导航器针对该路由展示什么。
StackNavigator({
// 对每一个你可能要导航切换到的屏幕，创建一个类似这样的项:
Profile: {
// `ProfileScreen` 是一个用于表示屏幕主要内容的React组件.
screen: ProfileScreen,
// 当屏幕`ProfileScreen`被导航器StackNavigator加载时,它会被赋予一个属性`navigation`.
// 可选项: 在web中深度链接或者使用react-navigation时,会用到path:
path: 'people/:name',
// Action 和 route 参数会从 path 中提取.
// 可选项: Override the `navigationOptions` for the screen
navigationOptions: ({ navigation }) => ({
title: `${navigation.state.params.name}'s Profile'`,
}),
},
...MyOtherRoutes,
});StackNavigatorConfig
路由的配置项 :
- initialRouteName - 整个导航栈的缺省屏幕，必须是路由配置项目中使用的某个路由名称。
- initialRouteParams - 初始路由参数
- navigationOptions - 导航器内各个屏幕的缺省 navigationOptions
- paths - A mapping of overrides for the paths set in the route configs
视觉效果配置项 ：
- mode - 定义屏幕渲染和切换风格:
- card - 使用标准的 iOS 和 Android 屏幕切换风格. 缺省值.
- modal - 屏幕从底部滑出，iOS上的常见模式. 仅仅对iOS有效, Android上无效.
- headerMode - Specifies how the header should be rendered:
- float - 只渲染一个停留在顶部的头部，屏幕切换时头部会有动画。iOS上常见模式。
- screen - 每个屏幕都有自己的头部并且头部跟随屏幕显示或者消失。Android上常见模式。
- none - 不是用头部。
- headerTransitionPreset - 指定使用
headerMode: float时头部如何从一个屏幕到另外一个屏幕过渡。
- fade-in-place - 头部组件不移动而是cross-fade,类似iOS平台的Twitter, Instagram, 和Facebook应用。 缺省值。
- uikit - 近似 iOS平台缺省行为。
- cardStyle - 使用该属性覆盖或者扩展栈内某个卡片式屏幕的缺省行为。
- transitionConfig - 函数，返回一个对象，会和缺省屏幕变换参数合并。 (可以看看类型定义中的TransitionConfig). 所返回的函数会被传递以下参数 :
- transitionProps - 新屏变换属性。
- prevTransitionProps - 旧屏变换属性。
- isModal - 布尔变量，指出屏幕是否为模态屏幕。
- onTransitionStart - 屏幕卡片变换动画将要开始时会被调用的函数。
- onTransitionEnd - 屏幕卡片变换动画一旦结束时就会被调用的函数。
StackNavigator使用的navigationOptions
title
headerTitle未指定时使用该参数作为headerTitle。另外，如果是TabNavigator，tabBarLabel不存在时headerTitle会充当tabBarLabel;如果是DrawerNavigator，drawerLabel不存在时headerTitle会充当drawerLabel。
header
被作为整个头部的React元素，或者给定属性HeaderProps返回React元素的函数，设置为null的话表示没有头部。
headerTitle
头部使用的字符串，React元素或者组件。缺省采用当前屏幕的title。当使用一个React组件时，它会接收allowFontScaling,style和children属性。标题字符串通过children属性传入。
headerTitleAllowFontScaling
是否允许头部标题字体放大以适配文字大小的无障碍可用性设置。缺省为true。
headerBackImage
返回按钮使用的图片的图片源(可以是URL对应的远程图片，比如{{uri: 'path/to/image'}}，或者本地图片资源,比如 {require('path/to/image')})。缺省是用的是react-navigation/views/assets/back-icon.png,也是相应平台上缺省的返回图标(iOS平台上是一个V形徽章图标，安卓平台上是一个箭头图标)。
headerBackTitle
iOS平台上用于返回按钮的标题字符串，如果不想显示设置为null。缺省为上一屏幕的headerTitle。
headerTruncatedBackTitle
headerBackTitle不适合屏幕尺寸时使用的标题字符串。缺省为”Back”。
headerRight
React元素，显示到头部右侧(译注:属于头部的一部分，而不是在头部外面)。
headerLeft
React元素或者组件，显示到头部左侧。当时用一个组件时，它渲染时会接受一些属性(onPress,title,titleStyle和其他一些属性–Header.js中有完整的属性列表)。
headerStyle
渲染头部所使用的样式对象。
headerForceInset
允许传递forceInset对象给头部里面使用的SafeAreaView。
headerTitleStyle
渲染头部标题组件所使用的样式对象。
headerBackTitleStyle
渲染头部返回标题所使用的样式对象。
headerTintColor
头部文字颜色
headerPressColorAndroid
Color for material ripple (Android >= 5.0时有效)
headerTransparent
缺省为false。如果设置为true的话，除非明确地通过headerStyle或者headerBackground设置，否则头部没有背景，换句话说，这种情况下头部是透明的。
headerBackground
配合headerTransparent一起使用，提供一个组件渲染到头部背景上。比如，这里你可以使用一个虚化视图(blur view)来创造一个半透明的头部。
gesturesEnabled
是否可以通过手势关闭屏幕。iOS缺省为true,安卓上缺省为false。
gestureResponseDistance
用于覆盖从屏幕边缘开始的触摸手势识别距离的一个对象，接收以下属性 ：
- horizontal - 数字- 水平方向上的距离. 缺省值25.
- vertical - 数字 - 垂直方向上的距离 . 缺省值135.
gestureDirection
用于覆盖屏幕关闭手势方向的字符串。缺省为正常行为，或者inverted表示从右到左扫屏。
Navigator Props
StackNavigator(...)函数所创建的导航器带有如下属性 :
screenProps- 传递额外的属性给子屏幕, 比如 :
const SomeStack = StackNavigator({
// 配置
});
<SomeStack
screenProps={/* 此属性会作为每个子屏幕的属性`this.props.screenProps`传入 */}
/>例子
如果你能本地运行应用NavigationPlayground的话，看看里面的例子SimpleStack.js和ModalStack.js。你可以在你的手机上直接看这些例子或者使用我们的expo演示。
定制了切换方式的模态StackNavigator
const ModalNavigator = StackNavigator(
{
Main: { screen: Main },
Login: { screen: Login },
},
{
headerMode: 'none',
mode: 'modal',
navigationOptions: {
gesturesEnabled: false,
},
transitionConfig: () => ({
transitionSpec: {
duration: 300,
easing: Easing.out(Easing.poly(4)),
timing: Animated.timing,
},
screenInterpolator: sceneProps => {
const { layout, position, scene } = sceneProps;
const { index } = scene;
const height = layout.initHeight;
const translateY = position.interpolate({
inputRange: [index - 1, index, index + 1],
outputRange: [height, 0, 0],
});
const opacity = position.interpolate({
inputRange: [index - 1, index - 0.99, index],
outputRange: [0, 1, 1],
});
return { opacity, transform: [{ translateY }] };
},
}),
}
);头部的切换也可以通过transitionConfig中的headerLeftInterpolator,headerTitleInterpolator和headerRightInterpolator来设置。