react-navigation 3.x 使用

最新推荐文章于 2025-06-10 12:01:49 发布

原创最新推荐文章于 2025-06-10 12:01:49 发布 · 7.2k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#react-navigation #react-native 底部导航

react native 专栏收录该内容

24 篇文章

订阅专栏

本文深入讲解React Navigation的安装与配置，包括react-navigation、react-native-gesture-handler的使用，以及iOS和Android上的特定设置。详细解释了顶部和底部导航的样式属性，如headerMode、tabBarOptions等，并提供了丰富的示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

官网文档：https://reactnavigation.org/docs/zh-Hans/getting-started.html

1、安装react-navigation

yarn add react-navigation
# or with npm
# npm install --save react-navigation

2、安装 react-native-gesture-handler。如果你使用 Expo，就什么都不需要做，他已经包含在 SDK 中了

yarn add react-native-gesture-handler
# or with npm
# npm install --save react-native-gesture-handler

Link 所有的原生依赖

react-native link react-native-gesture-handler

iOS 啥都不用做

为了完成 react-native-gesture-handler在 Android 上的安装，请确保在 MainActivity.java 上完成如下修改：

import com.facebook.react.ReactActivityDelegate;
import com.facebook.react.ReactRootView;
import com.swmansion.gesturehandler.react.RNGestureHandlerEnabledRootView;

public class MainActivity extends ReactActivity {

    ...

    @Override
    protected ReactActivityDelegate createReactActivityDelegate() {
        return new ReactActivityDelegate(this, getMainComponentName()) {
            @Override
            protected ReactRootView createRootView() {
                return new RNGestureHandlerEnabledRootView(MainActivity.this);
            }
        };
    }
}

顶部导航

import { createStackNavigator, createAppContainer } from 'react-navigation'

const RootStack = createStackNavigator({})

const AppContainer = createAppContainer(RootStack); //与2.x不同，需要用到createAppContainer

export default class Navigation extends Component {
    render() {
        return (
            <AppContainer/> //2.x返回的是 <RootStack/>
        )
    }
}

头部导航栏样式属性

路由的选项：

path：路由中设置的路径的覆盖映射配置

initialRouteName：设置 stack navigator 的默认页面，必须是路由配置中的某一个

initialRouteParams：初始路由参数

defaultNavigationOptions：用于屏幕的默认导航选项

视觉选项：

mode：定义渲染和转换的样式

card：使用标准的 iOS 和 Android 屏幕转换，这是默认设置
modal：iOS独有的使屏幕从底部画出，在 Android 上无效

headerMode：返回上级页面时动画效果

float：呈现一个位于顶部的单个页眉, 并在屏幕被更改时进行动画显示，这是 iOS 上常见的模式
screen：每个屏幕都有一个标头, 并且页眉随屏幕一起淡入和淡出，这是 Android 的常见模式
none：无动画

用于导航器内部页面的navigationOptions:

header：可以设置一些导航的属性，如果隐藏顶部导航栏只要将这个属性设置为null
headerTitle：设置导航栏标题
headerBackImage：在标题的后退按钮中显示自定义图片
headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"
headerRight：在标题栏右侧展示的 React 组件
headerLeft：在标题栏左侧展示的 React 组件
headerStyle：设置导航条的样式。背景色，宽高等
headerTitleStyle：设置导航栏文字样式
headerBackTitleStyle：设置导航栏‘返回’文字样式
headerLeftContainerStyle：自定义 headerLeft 组件容器的样式，例如，增加 padding
headerRightContainerStyle：自定义 headerRight 组件容器的样式，例如，增加 padding
headerTitleContainerStyle：自定义 headerTitle 组件容器的样式，例如，增加 padding
headerTintColor：设置导航栏颜色
headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
headerTransparent：标头背景是否透明
headerBackground：将其与 headerTransparent 一起使用, 以提供要在标头背景下呈现的组件
gesturesEnabled：是否可以使用手势关闭此页面，iOS默认支持，安卓默认关闭

底部导航样式属性

initialRouteName：第一次加载时初始选项卡路由的 routeName

order：定义选项卡顺序的 routeNames 数组

tabBarOptions

activeTintColor：标签和图标选中颜色
activeBackgroundColor：导航选中背景色
inactiveTintColor：标签和图标未选中颜色
inactiveBackgroundColor：导航未选中背景色
showIcon：是否显示 Tab 的图标,默认不显示
style：选项卡栏的样式对象
labelStyle：选项卡标签的样式对象
tabStyle：选项卡的样式对象

示例：

import React, { Component } from 'react'

import { createStackNavigator, createBottomTabNavigator, createAppContainer } from 'react-navigation'

import Home from './Home'
import Mine from './Mine'

const StackNavigator = createStackNavigator(
    {
        Home,
        Mine,
    },
    {
        initialRouteName: 'Home',
        defaultNavigationOptions: {
            headerStyle: {
                // backgroundColor: '#f4511e',
            },
            headerBackTitle: null,
            // headerTintColor: '#fff',
            headerTitleStyle: {
                fontWeight: 'bold',
            },
            header: null
        }
    }
)
const HomeStack = createStackNavigator({Home});
const MineStack = createStackNavigator({Mine});

const BottomTabNavigator = createBottomTabNavigator(
    {
        Home,
        Mine,
    },
    {
        initialRouteName: 'Home', //第一次加载时初始选项卡路由的 routeName
        order: ['Mine','Home'], //定义选项卡顺序的 routeNames 数组
        tabBarOptions: {
            activeTintColor: 'red',//标签和图标选中颜色
            activeBackgroundColor: 'yellow',//导航选中背景色
            inactiveTintColor: '#000', //标签和图标未选中颜色
            inactiveBackgroundColor: 'white',//导航未选中背景色
            showIcon: true,//是否显示 Tab 的图标,默认不显示
            style: {
                backgroundColor: 'yellow',//tabBar背景色
                height: 49
            },
            // labelStyle 选项卡标签的样式对象
            // tabStyle 选项卡的样式对象
        },
    }
)

// const AppContainer = createAppContainer(StackNavigator); 顶部导航
const AppContainer = createAppContainer(BottomTabNavigator); //底部导航

export default class Navigation extends Component {
    render() {
        return (
            <AppContainer/>
        )
    }
}

还有一些不常用的属性与样式没有用到，具体的可以查看官方：API

附加：带有icon图标的底部导航，用到了 nativebase 与 react-native-vector-icons

import React, { Component } from 'react';
import { createAppContainer, createBottomTabNavigator } from 'react-navigation'
import { Icon } from 'native-base';

import App from './App'
import Car from './Car'
import Camera from './Camera'
import Search from './Search'

const SELECTED_COLOR = 'white';
const UNSELECTED_COLOR = '#000';
const SELECTED_BGCOLOR = 'blue';
const UNSELECTED_BGCOLOR = 'deepskyblue';
const ORDER = ['App','Search','Camera','Car'];

export class TabBarIcon extends Component {
    render() {
        return(
            <Icon name={this.props.name}
                style={{
                    marginBottom: -5,
                    marginRight: 2,
                    fontSize: 24,
                    color: this.props.color,
                }}
            />
        )
    }
}
 
const BottomTabNavigator = createBottomTabNavigator(
    {
        App: {
            screen: App,
            navigationOptions: {
                tabBarLabel: '首页',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'apps'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Car: {
            screen: Car,
            navigationOptions: {
                tabBarLabel: '汽车',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'car'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Camera: {
            screen: Camera,
            navigationOptions: {
                tabBarLabel: '相机',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'camera'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        },
        Search: {
            screen: Search,
            navigationOptions: {
                tabBarLabel: '搜索',
                tabBarIcon:({focused}) => (
                    <TabBarIcon
                        focused={focused}
                        name={'search'}
                        color={focused ? SELECTED_COLOR : UNSELECTED_COLOR}
                    />
                )
            }
        }
    },
    {
        initialRouteName: 'App',
        order: ORDER,
        tabBarOptions: {
            activeTintColor: SELECTED_COLOR,
            activeBackgroundColor: SELECTED_BGCOLOR,
            inactiveTintColor: UNSELECTED_COLOR,
            inactiveBackgroundColor: UNSELECTED_BGCOLOR,
            style: {
                backgroundColor: 'pink',
            },
            labelStyle: {
                paddingBottom: 5,
                fontSize: 14,
            }
        }
    }
)
const AppContainer = createAppContainer(BottomTabNavigator); 

export default class FooterTabsExample extends Component {
    render() {
        return (
            <AppContainer/>
        )
    }
}

效果图：

tabBarIcon:({focused}) => (
    <TabBarItem
        focused={focused}
        normalImage={require('../icon/home.png')}
        selectedImage={require('../icon/home_selected.png')}
    />
)

 export class TabBarItem extends Component {
    render() {
        return(
            <Image source={ this.props.focused 
                ? this.props.selectedImage 
                : this.props.normalImage }
                style={ { width:24,height:24 } }
            />
        )
    }
}