React Navigation (v2)导航器

最新推荐文章于 2025-06-30 14:22:00 发布

杨码农

最新推荐文章于 2025-06-30 14:22:00 发布

阅读量1.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： React Native导航

本文链接：https://blog.youkuaiyun.com/qq_42185834/article/details/80418171

在React Native应用中，导航是控制组件呈现的关键，允许页面间的切换。导航器可以相互嵌套，实现复杂路由结构。例如，创建基础导航和构建包含TAB导航的应用，每个TAB页都有独立的列表和详情页导航，而详情页不显示底部TAB。详情参阅官方文档。

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

在RN里，一个页面可以由一个或多个组件构成，当进行页面跳转时就需要用到导航。

首先必须缕清导航跟组件的关系，导航是用于控制组件的渲染，导航跟导航之间可以相互嵌套。导航控制组件渲染很好理解，就是导航根据路径决定渲染哪个组件（例1）。导航跟跟导航相互嵌套，这里我举个APP常用的路由构建例子（例2）

以下例子并非基础用法，只是个人理解，详情参考官方文档：https://v2.reactnavigation.org/

例1：基础导航的创建使用

// 创建并导出导航，当你想使用导航管理你的组件，你就必须把组件放入导航类里，而不是直接使用
export default Stack = createStackNavigator(
    {
        Home : HomeComponent,   // 声明路径与组件的渲染关系
        page : pageComponent
    },
    {
        // 导航配置信息，在这里你可以配置头部样式，默认导航，滑动方式等。注意：这里的写法是为所有路由配置，可以放入单个路由里
        initialRouteName: 'Home',
        navigationOptions: {
            
        }
    }
)

例2：路由嵌套，这个例子实现APP底部为TAB导航，每个TAB页有自己的列表及详情页导航，详情页不带底部TAB导航

// 创建TAB导航
const layou = createBottomTabNavigator(
    {
        VideoList: {
            screen: VideoList
        },
        NewVideo: VideoAdd,
        UserMe: VideoAdd
    },
    {
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'VideoList') {
                    iconName = 'list-ul';
                } else if (routeName === 'NewVideo') {
                    iconName = 'camera';
                }else {
                    iconName = 'users';
                }
                return <Icon name={iconName} size={25} color="#ccc"/>;
            }
        }),
        tabBarOptions: {
            activeTintColor : '#e91e63',
            inactiveTintColor: '#c0c0c0',
            activeBackgroundColor: '#e9e9e9',
            showLabel: false,

        },
        initialRouteName: 'VideoList'
    }
);
// 创建一级导航
export default createStackNavigator(
    {
        layou: layou,
        videoDetails: Details
    },
    {
        initialRouteName: 'layou',
        navigationOptions: {
            header: null
        }
    }
);

二：导航的配置属性很多，你可以配置图标，样式，标题，头部是否显示等等，配置方法上例有些，放入navigationOptions属性里即可，可配置属性参考文章：https://www.jianshu.com/p/2f575cc35780