React Navigation的使用

在React Navigation中主要有三种类型的组件：

•      StackNavigation   用于实现各个页面之间的跳转
•      TabNavigation   用来实现同一个页面上不同界面的切换
•      DrawerNavigation   用来实现侧滑的抽屉效果

StackNavigation

采用堆栈式的页面导航来实现各个界面的跳转。它的构造函数

createStackNavigator(RouteConfigs,StackNavigatorConfig)

参数 RouteConfigs

   RouteConfig参数 表示各个页面路由配置，类似于android原生开发中的AndroidManifest.xml，它是让导航器知道需要导航的路由对应的页面。

const RouteConfigs = {
    Home: {
        screen: HomePage,
        navigationOptions: ({navigation}) => ({
            title: '首页',
        }),
    },
    Find: {
        screen: FindPage,
        navigationOptions: ({navigation}) => ({
            title: '发现',
        }),
    },
    Mine: {
        screen: MinePage,
        navigationOptions: ({navigation}) => ({
            title: '我的',
        }),
    },
};

这里为导航器配置了三个页面，Home,Find,Mine为路由名称，screen属性值HomePage,FindPage,MinePage为对应的页面。

navigationOptions 是对应页面的相关配置选项：

title - 通用头部标题，相关的属性还有headerTitle,tabBarLabel
header = 自定义的头部组件使用该组件会覆盖掉系统默认的头部组件，将其设置为null,则隐藏标题栏。
headerBackTitle - 标题栏中的返回标题，默认其值为title属性所指定的值
headerTruncatedBackTitle -