React Native React Navigation 使用总结

前言

界面Tab导航、跳转以及title的显示效果是一款优秀APP非常重要的一部分，门面要做好，才会带来好的用户体验。

安装

React Navigation 可以通过 npm 或 yarn 安装。

npm 安装

npm install --save react-navigation

yarn 安装

yarn add react-navigation

使用介绍

React Navigation 提供了三种默认的 navigators：

• StackNavigator：用来实现界面间的切换，新的界面置于栈顶。
• TabNavigator：实现Tab菜单功能。
• DrawerNavigator：实现抽屉菜单的效果。

StackNavigator 使用

创建 StackNavigator

import Tab from './MainTab';

export const RootNavigator = StackNavigator({
    Tab: {screen: Tab},
}, {
    initialRouteName: 'Tab',
    mode: 'card',
    headerMode: 'screen',
    navigationOptions: () => ({
        headerBackTitle: null,
        headerTintColor: theme.NAVBAR_TITLE_COLOR,
        headerStyle: {
            backgroundColor: theme.NAVBAR_BG_COLOR,
            borderBottomWidth: 0,
            elevation: 0,
        },
    })
});

API 定义

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs 配置：定义路由名称与组件的映射，例如 Tab: {screen: Tab}，其中第一个 Tab 是路由名，第二个是引入的组件。使用 this.props.navigation.navigate('路由名') 就可以实现跳转。

StackNavigatorConfig 配置：

• 路由相关配置：initialRouteName（默认的初始要跳转的界面）、initialRouteParams（初始化路由参数）、navigationOptions（默认的导航选项）、paths（路由路径配置）。
• 可视化选项：mode 定义显示和界面切换风格，如 card（Android 和 iOS 标准模式）或 modal（iOS界面从底部滑动显示）；headerMode 定义header如何渲染，如 float（header漂浮在界面之上）、screen（header吸附在界面上）或 none（不渲染头）；cardStyle 对单个card的风格进行定义；transitionConfig 用于界面切换配置；onTransitionStart 和 onTransitionEnd 是开始和结束切换时的回调。

Navigation Options 配置

包括 title（界面标题）、header（界面的头布局，设置为null则隐藏header）、headerTitle（界面title组件）、headerTitleAllowFontScaling（是否允许头字体支持缩放）、headerBackTitle（返回title）、headerRight 和 headerLeft（显示在header右侧和左侧的组件）、headerStyle（header的style对象）、headerTitleStyle（title组件样式）、headerTintColor（header的颜色）、gesturesEnabled（是否支持手势关闭屏幕）、gestureResponseDistance（手势响应的距离）等。

在组件中，可以通过 this.props.navigation 访问导航属性，例如在根组件中传递 navigation 属性。

TabNavigator 使用

创建 TabNavigator

export default TabNavigator({
    Home: {screen: Home},
    StationPage: {screen: StationPage},
    MessagePage: {screen: MessagePage},
    AccountPage: {screen: AccountPage},
}, {
    initialRouteName: 'StationPage',
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    animationEnabled: false,
    navigationOptions: {
        gesturesEnabled: false,
        headerBackTitle: null,
    },
    tabBarOptions: {
        showIcon: true,
        activeTintColor: theme.TAB_TINT_COLOR_ACTIVE,
        inactiveTintColor: theme.TAB_TINT_COLOR,
        indicatorStyle: {height: 0},
        style: {
            backgroundColor: '#efefef',
            height: px(100),
            paddingTop: 0,
        },
        labelStyle: {
            fontSize: px(24),
            marginTop: 0,
            paddingTop: 0,
        },
    }
});

API 定义

TabNavigator(RouteConfigs, TabNavigatorConfig)

RouteConfigs 配置：它是一个从路由名字到路由配置的映射，使用类似于 StackNavigator。

TabNavigatorConfig 配置：

• tabBarComponent（Tab bar组件）、tabBarPosition（Tab bar 的位置，“top” 或 “bottom”）、swipeEnabled（是否允许tab之间进行切换）、animationEnabled（是否允许切换时执行动画）、configureTransition（配置tab之间切换动画）、lazy（控制懒加载机制）、initialLayout（初始的布局）、tabBarOptions（tabBar的样式选项）、initialRouteName（第一个加载的路由名）、order（对加载路由进行排序）、paths（路由配置映射）、backBehavior（点击返回键是否切换到initialRoute）。

tabBarOptions 配置：包括 activeTintColor（选中tab的图标和标签的颜色）、activeBackgroundColor（选中Tab的背景颜色，仅iOS）、inactiveTintColor（未被选中Tab的图标和标签的颜色）、inactiveBackgroundColor（未被选中的Tab的背景颜色，仅iOS）、showLabel（是否显示对应Tab的标签）、style（Tab bar的样式）、labelStyle（Tab标签的样式）、tabStyle（Tab的样式）、allowFontScaling（标签字体是否允许缩放）、showIcon（是否显示图片）、upperCaseLabel（是否标签大写）、pressColor（点击颜色，Android >= 5.0 涟漪效果）、pressOpacity（透明度改变）、scrollEnabled（是否Tab能够滑动）、indicatorStyle（Tab 底端指示器风格）、iconStyle（Tab Icon对象样式）。

Navigation Options 配置：包括 title（标题）、tabBarVisible（tabBar是否可见）、swipeEnabled（是否允许在标签之间进行滑动）、tabBarIcon（tabBar图片icon）、tabBarLabel（同tabBarOptions.showLabel）、tabBarOnPress（点击tabBar触发，可处理自定义逻辑）。

DrawerNavigator 使用

创建 DrawerNavigator

const MyApp = DrawerNavigator({
  Home: {
    screen: MyHomeScreen,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
});

API 定义

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs 配置：同 StackNavigator 配置。

DrawerNavigatorConfig 配置：

• drawerWidth（抽屉的宽度）、drawerPosition（抽屉的位置，left 或 right）、contentComponent（用来渲染抽屉内容的组件）、contentOptions（配置抽屉的内容）、useNativeAnimations（使用本地动画）、drawerBackgroundColor（抽屉的背景颜色）、initialRouteName（初始化路由名）、order（抽屉item显示的顺序）、paths（路由名字到配置的映射）、backBehavior（返回按钮是否返回初始路由）。

自定义 contentComponent

可以创建自定义的抽屉内容组件，例如使用 DrawerItems 和 SafeAreaView 来渲染。

contentOptions 配置：包括 items（可以修改或者重写路由）、activeItemKey（激活路由对应的key）、activeTintColor（选中标签对应的标签和icon的颜色）、activeBackgroundColor（选中标签对应的颜色）、inactiveTintColor（未选中对应的标签和icon的颜色）、inactiveBackgroundColor（未选中对应的背景颜色）、onItemPress（当item被点击时调用的函数）、itemsContainerStyle（对应section部分的样式）、itemStyle（对应item的样式）、labelStyle（对应label的样式）、iconContainerStyle（重写view的icon Container样式）。

Navigation Options 配置：包括 title（标题）、drawerLabel（字符串、组件或函数，标签显示在侧边栏）、drawerIcon（组件或函数，图片显示在侧边栏）、drawerLockMode（指定抽屉的锁模式，如 unlocked、locked-closed、locked-open）。

Navigator Props 配置

与 StackNavigator 类似，用于导航属性传递。