React Navigation (v2)导航器

最新推荐文章于 2024-09-10 05:36:05 发布

杨码农

最新推荐文章于 2024-09-10 05:36:05 发布

阅读量1.6k

点赞数 1

文章标签： React Native导航

本文链接：https://blog.csdn.net/qq_42185834/article/details/80418171

版权

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

摘要由CSDN通过智能技术生成

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

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

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

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

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