React Native 引入第三方组件与React Navigation导航使用详解

在 React Native 开发中，当内置组件无法满足复杂需求时，引入第三方组件是一种高效的方式，可以节省开发时间和精力。本文将介绍如何引入第三方组件，并详细讲解 React Navigation 导航库的使用。

1. 引入第三方组件

引入第三方库通常分为两个步骤。

1.1 安装第三方库

在项目根目录（即 package.json 所在目录）执行以下命令来安装第三方库：

npm install [第三方库] --save

例如，安装 react-native-tab-navigator：

npm install react-native-tab-navigator --save

1.2 导入组件

在需要使用该组件的 JS 文件中导入模块：

import [第三方组件] from '[第三方库]';

例如：

import TabNavigator from 'react-native-tab-navigator';

2. React Navigation 的使用

React Navigation 是 React Native 中实现页面跳转和导航的常用库。自 0.44 版本起，它取代了原有的 Navigator。要使用 React Navigation，首先在项目根目录安装：

npm install --save react-navigation

React Navigation 主要包含三个导航器：StackNavigator（顶部导航栏，用于页面跳转）、TabNavigator（选项卡导航，通常在顶部或底部）和 DrawerNavigator（抽屉式侧滑导航）。

2.1 StackNavigator

StackNavigator 是一种堆栈式导航器，每次跳转的新页面会被推入堆栈顶部，返回时则从顶部移除。

2.1.1 基本使用方法

首先创建一个基本页面 StackMainScreen.js：

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class StackMainScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        const { navigate } = this.props.navigation;
        return (
            <View>
                <Text>Hello, Chat App!</Text>
                <Button
                    onPress={() => navigate('Chat')}
                    title="Chat with Lucy"
                />
            </View>
        );
    }
}

export default StackMainScreen;

然后创建 ChatScreen.js 页面：

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

export default class ChatScreen extends React.Component {
    static navigationOptions = {
        title: 'Chat with Lucy',
    };
    render() {
        return (
            <View>
                <Text>Chat with Lucy</Text>
            </View>
        );
    }
}

最后在 StackNavigator 中配置路由：

const SimpleApp = StackNavigator({
    Home: { screen: StackMainScreen },
    Chat: { screen: ChatScreen },
});

这样即可实现页面间的跳转与返回。

2.1.2 传递参数

通过导航器可以在页面间传递参数。在跳转时传递参数：

<Button
    onPress={() => navigate('Chat', { user: 'Lucy' })}
    title="Chat with Lucy"
/>

在目标页面中接收并显示参数：

class ChatScreen extends React.Component {
    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,
    });
    render() {
        const { params } = this.props.navigation.state;
        return (
            <View>
                <Text>Chat with {params.user}</Text>
            </View>
        );
    }
}

2.1.3 配置标题栏

标题栏是 StackNavigator 独有的，可以通过 navigationOptions 进行配置。例如，添加右侧按钮：

static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
    headerRight: <Button title="Info" />,
});

还可以动态修改导航栏参数。通过 navigation.setParams 方法，可以根据状态改变按钮文本和行为：

static navigationOptions = ({ navigation }) => {
    const {state, setParams} = navigation;
    const isInfo = state.params.mode === 'info';
    const {user} = state.params;
    return {
        title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
        headerRight: (
            <Button
                title={isInfo ? 'Done' : `${user}'s info`}
                onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
            />
        ),
    };
};

navigationOptions 支持多种参数，如 headerTitle（导航栏标题）、headerRight（右侧元素）、headerStyle（导航栏样式）、headerTitleStyle（标题样式）、headerTintColor（文字颜色）等，允许深度自定义外观。

2.1.4 StackNavigator 配置

StackNavigator 接受两个参数：RouteConfigs（路由配置）和 StackNavigatorConfig（导航器配置）。例如，设置页面切换模式为上下滑动（modal）：

const SimpleApp = StackNavigator(
    {
        Home: { screen: StackMainScreen },
        Chat: { screen: ChatScreen },
    },
    {
        mode: 'modal',
    }
);

RouteConfigs 中定义各个屏幕组件，StackNavigatorConfig 则用于配置初始路由、导航栏显示模式（如 headerMode 可设为 float、screen 或 none）、页面切换动画等。

2.2 TabNavigator

TabNavigator 提供选项卡导航，常见于应用底部或顶部，用于切换不同功能模块。

2.2.1 基本使用方法

创建 TabMainScreen.js 作为主页：

import React from 'react';
import { Text, Button, StyleSheet, Image } from 'react-native';
import { TabNavigator } from "react-navigation";
import SecondScreen from "./SecondScreen";

class TabMainScreen extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/color_for_danmu_normal.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };
    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Second')}
                title="Go to notifications"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26,
    },
});

const TabMainScreenNavigator = TabNavigator({
    Main: { screen: TabMainScreen },
    Second: { screen: SecondScreen },
});
export default TabMainScreenNavigator;

SecondScreen.js 作为第二个选项卡页面：

import React from 'react';
import { Button, StyleSheet, Image } from 'react-native';

export default class SecondScreen extends React.Component {
    static navigationOptions = {
        tabBarLabel: 'Second',
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/face_unpress.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };
    render() {
        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back home"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26,
    },
});

在 TabNavigator 配置中，可以设置选项卡位置、动画和样式：

const TabMainScreenNavigator = TabNavigator(
    {
        Main: { screen: TabMainScreen },
        Second: { screen: SecondScreen },
    },
    {
        tabBarPosition: 'top', // 或 'bottom'
        animationEnabled: true,
        tabBarOptions: {
            activeTintColor: '#e91e63',
            showIcon: true,
        },
    }
);

2.2.2 TabNavigator 配置

TabNavigatorConfig 允许设置初始路由、标签栏组件（tabBarComponent）、滑动切换（swipeEnabled）等。tabBarOptions 用于自定义标签栏外观，例如激活颜色、标签样式、指示器样式等。对于安卓顶部标签栏，可通过 indicatorStyle: { height: 0 } 隐藏底部指示线。

2.2.3 配置选项卡

每个屏幕的 navigationOptions 可定义 tabBarLabel（标签名称）和 tabBarIcon（图标），并支持 tabBarOnPress 事件处理自定义点击行为。

2.3 DrawerNavigator

DrawerNavigator 实现侧滑抽屉式导航，常用于应用菜单。

2.3.1 基本使用方法

创建 DrawerMainScreen.js：

import React from 'react';
import { Button, StyleSheet, Image } from 'react-native';
import { DrawerNavigator } from "react-navigation";
import DrawerSecondScreen from "./DrawerSecondScreen";

class DrawerMainScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/color_for_danmu_normal.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };
    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Second')}
                title="Go to Second"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});

const DrawerMainScreenNavigator = DrawerNavigator({
    Home: { screen: DrawerMainScreen },
    Second: { screen: DrawerSecondScreen },
});
export default DrawerMainScreenNavigator;

DrawerSecondScreen.js：

import React from 'react';
import { Button, StyleSheet, Image } from 'react-native';

export default class DrawerSecondScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Notifications',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/face_unpress.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };
    render() {
        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back home"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26,
    },
});

侧滑栏可以通过 this.props.navigation.navigate('DrawerOpen')、'DrawerClose' 或 'DrawerToggle' 来控制打开、关闭或切换。

2.3.2 DrawerNavigator 配置

DrawerNavigatorConfig 支持设置侧滑栏宽度（drawerWidth）、位置（drawerPosition，默认为左侧）、内容组件（contentComponent）等。contentOptions 可配置菜单项的激活颜色、背景色、标签样式和点击事件。

2.3.3 配置侧滑栏菜单

每个屏幕的 navigationOptions 可定义 drawerLabel 和 drawerIcon 来自定义菜单项显示。通过 contentComponent 可以完全自定义侧滑栏内容，例如包装 DrawerItems 组件并添加额外元素。

总结，React Navigation 提供了灵活且强大的导航解决方案，通过 StackNavigator、TabNavigator 和 DrawerNavigator 的组合，可以满足大多数应用的导航需求。合理利用第三方组件和导航库，能显著提升 React Native 开发效率。