随笔- 137 文章- 0 评论- 34 阅读- 97万

React Native之使用导航器跳转页面（react-navigation）

　　react-navigation是一个导航库，要使用react-navigation来实现跳转页面，首先得在项目中安装此库，由于Yarn是Facebook提供的替代npm的工具，可以加速node模块的下载。

　　所以这里使用Yarn来安装react-navigation。至于Yarn的安装，详情见 React Native官网

　　安装命令： yarn add react-navigation

　　react-navigation 主要包括三个组件：

StackNavigator 导航组件
TabNavigator 切换组件
DrawerNavigator 抽屉组件（没使用成功，所以不做介绍）

　　StackNavigator 用于实现各个页面之间的跳转， TabNavigator 用来实现同一个页面上不同界面的切换， DrawerNavigator 可以实现侧滑的抽屉效果。

　　StackNavigator组件有两个参数，使用方法为：StackNavigator(RouteConfigs, StackNavigatorConfig)

　　其中RouteConfigs 参数表示各个页面路由配置，它是让导航器知道需要导航的路由对应的页面。

　　StackNavigatorConfig 参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等。

　　TabNavigator ，即是Tab选项卡。该组件也接受两个参数，用法：TabNavigator(RouteConfigs, TabNavigatorConfig)

　　其中RouteConfigs路由配置和 StackNavigator 中是一样的，配置路由以及对应的 screen 页面， navigationOptions 为对应路由页面的配置选项。

　　TabNavigatorConfig表示选项卡的配置，包括初始显示的Tab对应的页面路由名称，选项卡的位置，选项卡配置属性等等。

　　例如，实现一个顶部导航：

　　App.js代码：

import React, {Component} from "react";
// StackNavigator用于实现各个页面间的跳转。TabNavigator切换组件，实现同一页面上不同界面的切换。
import {StackNavigator, TabBarTop, TabNavigator} from "react-navigation";
import HomeScreen from "./HomeScreen";  // 从HomeScreen页面导入HomeScreen组件，HomeScreen其实是表示HomeScreen.js。./表示当前页面，不可删除
import NewsScreen from "./NewsScreen"; // 从NewsScreen页面导入NewsScreen组件
import MyScreen from "./MyScreen"; // 从MyScreen页面导入MyScreen组件
export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        );
    }
}
const TabRouteConfigs = {  // 表示各个页面路由配置,让导航器知道需要导航的路由对应的页面
    Home: {  // 路由名称
        screen: HomeScreen,  // 对应的路由页面
        navigationOptions: ({navigation}) => ({
            // tabBarLabel: '首页',
            title: '首页',
        }),
    },
    News: {
        screen: NewsScreen,
        navigationOptions: {  // 指定路由页面的配置选项
            // tabBarLabel: '新闻',   // 表示tab的标题
            title: '新闻',  // 可用作头部标题 headerTitle ，或者Tab标题 tabBarLabel
        },
    }
    ,
    My: {
        screen: MyScreen,
        navigationOptions: {
            // tabBarLabel: '我的',
            title: '我的',
        },
    }
};
const TabNavigatorConfigs = {
    initialRouteName: 'Home',  // 初始显示的Tab对应的页面路由名称
    tabBarComponent: TabBarTop, // Tab选项卡组件，有 TabBarBottom 和 TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop 。
    tabBarPosition: 'top', // 设置选项卡的位置，在顶部或是底部，有'top'与'bottom'可选
    lazy: true,  // 是否懒加载页面
    tabBarOptions: {} // 在属性TabBarBottom与TabBarTop中有所不同
};
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    }
};
const StackNavigatorConfigs = {  // 表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等
    initialRouteName: 'Tab',
    navigationOptions: {
        title: 'Welcome to learn React Native!',
        headerStyle: {backgroundColor: '#5da8ff'},  // 设置导航头部样式
        headerTitleStyle: {color: '#333333'},  // 设置导航头部标题样式
    }
};
// StackNavigator 导航组件，用来实现各个界面跳转
const Navigator = StackNavigator(StackRouteConfigs, StackNavigatorConfigs);

　　HomeScreen.js代码：

import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class HomeScreen extends Component {
    render() {
        return (
            <Text>HomeScreen</Text>
        )
    }
}

　　NewsScreen.js代码：

import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class NewsScreen extends Component {
    render() {
        return (
            <Text>NewsScreen</Text>
        )
    }
}

　　MyScreen.js代码：

import React,{Component} from 'react';
import {View,Text} from 'react-native';
export default class MyScreen extends Component {
    render() {
        return (
            <Text>MyScreen</Text>
        )
    }
}

　　效果图如下：