react-native之react-navigation使用总结

前言

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

---

目录

• 安装
• 使用介绍
  

  ---

安装

npm安装

npm install --save react-navigation

yarn安装

yarn add react-navigation

使用介绍

1.navigation有三个默认的navigators：

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

2.具体使用

StackNavigator使用：

1.创建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,
        },
    })
});

export default class AppWithNavigationState extends Component {
   
    render() {
        return (
            <RootNavigator navigation={addNavigationHelpers({
                dispatch: this.props.dispatch,
                state: this.props.nav
            })} />
        )
    }
}

2.API 定义

StackNavigator(RouteConfigs, StackNavigatorConfig)

RouteConfigs配置：

 Tab: {screen: Tab},第一个Tab是定义的路由名字，第二个是引入的组件。使用this.props.navigation.navigate('路由名')，就可以实现跳转;

StackNavigatorConfig配置：

路由相关配置：

1. initialRouteName：默认的初始要跳转的界面，必须匹配一个已经配置的路由，否则报错。
2. ini