React Navigation (v2)导航器

在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

React Navigation (v2)导航器相关推荐

React Navigation (v2)
https://reactnavigation.org/docs/en/transitioner.html 转载于:https://www.cnblogs.com/-WML-/p/9176601.ht ...
RN路由-React Navigation组件5.x-基本原理(中文文档)
##引言 React Native路由导航,有它就够了!该文档根据React Navigation文档翻译,有些内容会根据自己的理解进行说明,不会照搬直译,若发现理解有问题的地方,欢迎大家提点!由于本 ...
使用Redux在React Navigation App中管理状态
by Andrea Bizzotto 通过安德里亚·比佐托(Andrea Bizzotto) 使用Redux在React Navigation App中管理状态 (Managing State in ...
react navigation 中使用goBack()跳转到指定页面
一.适用场景: 在app端开发的时候,相反回到某一个页面的时候保持跳转页面的所有状态不更新,也就是说不触发新的生命周期. 例如:A-->B-->C-->D 要想从D页面直接返回到B页 ...
React Navigation 基本使用
React Navigation 基本使用参考资料 https://reactnavigation.org/docs/ 环境搭建 Minimum requirementsreact-native & ...
React Navigation 路由导航库升级 5.x
当前版本:3.0.0 升级版本:5.12.8 安装依赖 $ yarn add @react-navigation/native @react-navigation/stack @react ...
react navigation中使用goBack返回指定页面
goBack 首先, 现在看一下react navigation官网中对goBack的描述: goBack的参数为页面的key, 这个key是系统随机分配的, 而不是手动设置的routeName, 所 ...
Facebook力推导航库:React Navigation使用详解
本文来自Songlcy投稿:文章地址:http://blog.csdn.net/u013718120/article/details/72357698 一.开源库介绍今年1月份,新开源的react- ...
React Native之React Navigation踩坑
自动重装系统之后,已经很长一段时间没有来写React Native了,今天空闲之余,决定重新配置React Native的开发环境,继续踩坑... React Native的开发环境配置狠简单,只要依 ...

React Navigation (v2)导航器

React Navigation (v2)导航器相关推荐

最新文章

热门文章