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: 设置关闭手势的方向。默认从左向右，可以设置从右到左的滑动操作。

　　

　　

转载于:https://www.cnblogs.com/Jiangchuanwei/p/10460936.html