React-Native 导航之 react-navigation

一、每个 App 都少不了的导航功能

无论是底部 Button 切换还是页面跳转，这些导航功能构成了 App 的基本骨架，之后才能用业务逻辑填充。在 React-Native 中，Facebook 曾推出过导航组件，但面对复杂业务时性能体验较差。因此，第三方导航组件 react-navigation 应运而生，并且得到了 Facebook 的官方推荐。该组件主要包含三个核心功能组件：TabNavigator、StackNavigator 和 DrawerNavigation，分别实现 Tab 导航、页面跳转和抽屉效果（侧滑菜单）。本文将重点介绍前两个组件的使用方法。

二、本次要实现的目标效果

本教程旨在实现两个主要效果：主界面底部具有三个切换 Tab 的导航栏，以及从首页跳转到二级页面的功能。下面将通过代码逐步实现这些功能。

三、使用 TabNavigator 实现底部导航

1. 安装

首先，通过 npm 安装 react-navigation：

npm install --save react-navigation

安装完成后，可以检查 package.json 文件中的 dependencies 部分是否包含 react-navigation，或者在 node_modules 文件夹中确认组件包是否存在。

2. 路由配置

实现底部 Tab 导航需要两个步骤：创建对应的页面组件，然后配置路由。我们创建三个页面：MainPage（首页）、SettingPage（设置页）和 MinePage（我的页面）。

以 MainPage.js 为例：

import React, { Component } from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View
} from 'react-native';

export default class MainPage extends Component {
    static navigationOptions = {
        headerTitle: '首页',
        tabBarLabel: '首页',
        tabBarIcon: <Image style={{height: 30, width: 30}} source={require('./ic_tab_mine.png')}/>
    };

    render() {
        const { navigate } = this.props.navigation;
        return (
            <View style={styles.container}>
                <Text>首页界面</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
});

其他两个页面类似。接下来，创建路由配置文件 MyNavigators.js：

import React from 'react';
import {StackNavigator, TabNavigator} from 'react-navigation';
import MainPage from '../pages/MainPage';
import SettingPage from '../pages/SettingPage';
import MinePage from '../pages/MinePage';
import DetailsPage from '../pages/DetailsPage';

const Tabs = TabNavigator({
    Home: { screen: MainPage },
    Set: { screen: SettingPage },
    Me: { screen: MinePage }
}, {
    animationEnabled: false,
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    backBehavior: 'none',
    tabBarOptions: {
        activeTintColor: '#ff8500',
        inactiveTintColor: '#999',
        showIcon: true,
        indicatorStyle: { height: 0 },
        style: { backgroundColor: '#fff' },
        labelStyle: { fontSize: 14 },
    },
});

export default StackNavigator({
        Main: { screen: Tabs },
        DetailsPage: { screen: DetailsPage },
    },
    {
        headerMode: 'screen',
        initialRouteName: 'Main',
        mode: 'modal'
    });

TabNavigator 接收两个参数：Tab 目标页面和样式配置。StackNavigator 用于注册所有页面组件，类似于 Android 中的 Activity 注册。

3. 集成使用

创建 App.js 文件引入路由组件：

import React, {Component} from 'react';
import MyNavigators from './src/navigators/MyNavigators';

export default class App extends Component {
    render() {
        return <MyNavigators/>;
    }
}

然后修改 index.js 加载 App.js：

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('AbcAPP', () => App);

运行程序即可看到底部导航 Tab。

四、使用 StackNavigator 实现页面跳转

在 StackNavigator 中注册过的组件都会拥有 navigation 属性，其中 navigate 方法可用于跳转，支持参数传递。例如，在 MainPage 中添加跳转到详情页的入口：

MainPage.js 中修改 render 方法：

render() {
    const { navigate } = this.props.navigation;
    return (
        <View style={styles.container}>
            <TouchableOpacity 
                style={{width:200, height: 50, backgroundColor: 'red', borderRadius:5, justifyContent: 'center', alignItems: 'center'}}
                onPress={() => navigate('DetailsPage', { title: '详情页', des: '回到上一页' })} >
                <Text style={{color:"#FFF"}}>点击查看详情</Text>
            </TouchableOpacity>
        </View>
    );
}

DetailsPage.js 详情页组件：

import React, {Component} from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class DetailsPage extends Component {
    static navigationOptions = ({navigation}) => ({
        headerTitle: navigation.state.params.title,
        headerTitleStyle: { fontSize:18, fontWeight:'400', alignSelf:'center' },
        headerStyle: { height: 65, backgroundColor: '#FFF' },
        headerRight: <View><Text style={{paddingRight: 14, color: '#000', fontSize: 18}}>编辑</Text></View>,
        headerBackTitle: '回去',
        headerTruncatedBackTitle: '返回'
    });

    backFunction = () => {
        this.props.navigation.goBack();
    }

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity
                    style={{width:200, height: 50, backgroundColor: 'green', borderRadius:5, justifyContent: 'center', alignItems: 'center'}}
                    onPress={this.backFunction}>
                    <Text style={{color:"#FFF"}}>{this.props.navigation.state.params.des}</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
        alignItems:'center',
        justifyContent:'center'
    },
});

通过以上步骤，我们完成了 React-Native 中 react-navigation 的基本使用，实现了底部 Tab 导航和页面跳转功能。实际开发中，可根据需求调整样式和配置。