createStackNavigator
提供APP屏幕之间切换的能力,它是以栈的形式还管理屏幕之间的切换,新切换到的屏幕会放在栈的顶部。
默认情况下,createStackNavigator提供了转场过渡效果,在Android和iOS上过渡效果是不同的,这也是React Native重平台性的一个体现,在Android上从屏幕底部淡入,在iOS上是从屏幕的右侧划入,当然你也可以通过配置让StackNavigator支持屏幕从底部滑入的效果。
createStackNavigator(RouteConfigs, StackNavigatorConfig):
RouteConfigs
(必选):路由配置对象是从路由名称到路由配置的映射,告诉导航器该路由呈现什么。StackNavigatorConfig
(可选):配置导航器的路由(如:默认首屏,navigationOptions,paths等)样式(如,转场模式mode、头部模式等)。
从createStackNavigator API上可以看出createStackNavigator
支持通过RouteConfigs
和 StackNavigatorConfig
两个参数来创建createStackNavigator导航器。
RouteConfigs支持三个参数screen
、path
以及navigationOptions
;
screen
(必选):指定一个 React 组件作为屏幕的主要显示内容,当这个组件被createStackNavigator加载时,它会被分配一个navigation
prop。path
(可选):用来设置支持schema跳转时使用,具体使用会在下文的有关Schema
章节中讲到;navigationOptions
(可选):用以配置全局的屏幕导航选项如:title、headerRight、headerLeft等;
从react-navigation
源码中可以看出StackNavigatorConfig支持配置的参数有10个。
function createStackNavigator(routeConfigMap, stackConfig = {}) { const { initialRouteKey, initialRouteName, initialRouteParams, paths, navigationOptions, disableKeyboardHandling, getCustomActionCreators } = stackConfig; ...复制代码
这7个参数可以根据作用不同分为路由配置、视图样式配置两类,首先看用于路由配置的参数:
用于路由配置的参数:
- initialRouteName: 设置默认的页面组件,必须是上面已注册的页面组件。
- initialRouteParams: 初始路由的参数。
- navigationOptions: 屏幕导航的默认选项,下文会详细讲解。
- initialRouteKey - 初始路由的可选标识符。
- paths: 用来设置支持schema跳转时使用,具体使用会在下文的有关
Schema
章节中讲到。
用于导航样式配置的参数:
- mode: 页面切换模式: 左右是card(相当于iOS中的push效果), 上下是modal(相当于iOS中的modal效果)
- card: 普通app常用的左右切换。
- modal: 上下切换。
- headerMode: 导航栏的显示模式: screen: 有渐变透明效果, float: 无透明效果, none: 隐藏导航栏。
- float: 无透明效果, 默认。
- screen: 有渐变透明效果, 如微信QQ的一样。
- none: 隐藏导航栏。
- headerBackTitleVisible : 提供合理的默认值以确定后退按钮标题是否可见,但如果要覆盖它,则可以使用true或` false 在此选项中。
- fade-in-place: 标题组件交叉淡入淡出而不移动,类似于iOS的Twitter,Instagram和Facebook应用程序。 这是默认值。
- uikit: iOS的默认行为的近似值。 headerTransitionPreset: 指定在启用headerMode:float时header应如何从一个屏幕转换到另一个屏幕。
- cardStyle: 样式(iOS上页面切换会有白色渐变蒙层,想去掉则可以这样设置,cardStyle: { opacity: null },切换页面时的页面边框也在这里可以设置)。
- onTransitionStart: 页面切换开始时的回调函数 (我们可以在这里注册一些通知,告知我们切面切换的状态,方便后面处理页面切换事件)。
- onTransitionEnd: 页面切换结束时的回调函数。
支持一下参数:
- 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: 设置关闭手势的方向。默认从左向右,可以设置从右到左的滑动操作。
export const AppStackNavigator = createStackNavigator({ HomePage: { screen: HomePage }, Page1: { screen: Page1, navigationOptions: ({navigation}) => ({ title: `${navigation.state.params.name}页面名`//动态设置navigationOptions }) }, Page2: { screen: Page2, navigationOptions: {//在这里定义每个页面的导航属性,静态配置 title: "This is Page2.", } }, Page3: { screen: Page3, navigationOptions: (props) => {//在这里定义每个页面的导航属性,动态配置 const {navigation} = props; const {state, setParams} = navigation; const {params} = state; return { title: params.title ? params.title : 'This is Page3', headerRight: (
步骤一的代码中通过两种方式配值了navigationOptions:
静态配置:
对Page2的navigationOptions配置是通过静态配置完成的:
Page2: { screen: Page2, navigationOptions: {//在这里定义每个页面的导航属性,静态配置 title: "This is Page2.", }},复制代码
这种方式被称为静态配置,因为navigationOptions中的参数是直接Hard Code的不依赖于变量。
动态配置:
对Page3的navigationOptions配置是通过动态配置完成的:
Page3: { screen: Page3, navigationOptions: (props) => {//在这里定义每个页面的导航属性,动态配置 const {navigation} = props; const {state, setParams} = navigation; const {params} = state; return { title: params.title ? params.title : 'This is Page3', headerRight: (
从上述代码中可以看出Page3的navigationOptions依赖于props这个变量所以是动态的,当props中的内容发生变化时,navigationOptions也会跟着变化;
提示:除了在创建createStackNavigator时配置navigationOptions外,在StackNavigator之外也可以配置navigationOptions;
createStackNavigator之外也可以配置navigationOptions
方式一:
Page2.navigationOptions = { title: "This is Page2.",};复制代码
方式二:
export default class Page1 extends React.Component { //也可在这里定义每个页面的导航属性,这里的定义会覆盖掉别处的定义 static navigationOptions = { title: 'Page1', }; ...复制代码
export default class HomePage extends React.Component { //在这里定义每个页面的导航属性 static navigationOptions = { title: 'Home', headerBackTitle:'返回哈哈',//设置返回此页面的返回按钮文案,有长度限制 } render() { const {navigation} = this.props; return欢迎来到HomePage
代码解析:
页面跳转可分为两步:
-
- 获取navigation:
const {navigation} = this.props;复制代码
-
- 通过
navigate(routeName, params, action)
进行页面跳转:
navigation.navigate('Page2'); navigation.navigate('Page3',{ name: 'Devio' });复制代码
这里在跳转到
Page3
的时候传递了参数{ name: 'Devio' }
; - 通过
export default class Page3 extends React.Component { render() { const {navigation} = this.props; const {state, setParams} = navigation; const {params} = state; const showText = params.mode === 'edit' ? '正在编辑' : '编辑完成'; return欢迎来到Page3 {showText} { setParams({title:text}) }} />
代码解析:
在上述代码中通过:
{ setParams({title:text}) }}/>复制代码
将输入框中内容的变化,通过setParams({title:text})
更新到页面的标题上,你会看到当输入框中内容发生变化时,标题也会跟着变。
当用户单击Go Back
按钮时,通过:
navigation.goBack();复制代码
实现了返回上一页;
类似上述的应用场景有很多,大家可以通过与本教程配套的进行进一步学习。
- 大家在学习使用React Navigation3x过程中遇到任何问题都可以在中寻找答案哈。
- 另外,也可以通过学习React Navigation3x开发的更多实战经验和技巧,以及优化思路。