@yz1311/teaset-navigation
TypeScript icon, indicating that this package has built-in type declarations

0.2.4 • Public • Published

teaset-navigation

从@yz1311/teaset中拆分出来的导航帮助库

由于react-navigation v5的变更过大,所以单独将该帮助文件拆分出来

特色

  • 维护几个常用的API,后续不受react-navigation影响
  • 自带防止快速点击多次响应的问题
  • 全局静态方法调用,不需要高阶组件支持

安装

react-navigation v5(@react-navigation/native)以上版本请安装:

npm install --save teaset @yz1311/teaset-navigation

react-navigation v5以下安装0.2.0以下版本:(文档不全,非v5版本请不要使用)

npm install --save teaset @yz1311/teaset-navigation@0.1.0

react-navigation的安装请参照跳转

理念

react-navigation提供了多个navigator,包括stack、drawer、tab,但是个人建议只使用stack组件,除特殊情况,一般只使用一层stackNavigator,不要 stackNavigator套stackNavigator,stackNavigator中包含的那些方法基本可以满足常见的情况。

tab组件可以使用react-native-scrollable-tab-view或者react-native-tab-view代替

drawer组件可以使用react-native-gesture-handler的DrawerLayout组件替代

这种方式,灵活度更高

用法(react-navigation v5以下暂无文档)

1.初始化(非必要操作)

初始化后,可以使用global.NavigationHelper的方式全局调用,而不必每次引用包路径,如果不需要,可以不调用

在入口文件中初始化

import {NavigationHelper} from '@yz1311/teaset-navigation';

NavigationHelper.init(NavigationHelper);

注意:

在使用eslint或者typescript的项目中可能会爆红,找不到属性名

1.针对eslint,在.eslintrc.js文件(或者等同的其他形式的文件)的globals节点加入:

"globals": {
    ....

    //添加这一行,添加全局对象
    "NavigationHelper": true,
}

2.针对typescript, 在global.d.ts文件(没有可以创建)根节点加入:

下面这些定义可以直接从包中的index.d.ts文件中复制过来

declare var NavigationHelper: {
    init: (helper,name?:string) => void,
    navigation: any,
    navRouters: any,
    isTopScreen: (key:string) => boolean,
    isTopScreenByKey: (key:string) => boolean,
    isTopScreenByName: (routeName:string) => boolean,
    goBack: () => void,
    push: (routeName: string, params?:any) => void,
    navigate: (routeName:string, params?:any) => void,
    resetTo: (routeName:string,params?:any) => void,
    replace: (routeName:string, params?:any) => void,
    popN: (num:number) => void,
    popToTop: () => void,
    popToIndex: (indexOfRoute:number) => void,
    popToRoute: (routeName:string) => void,
};

2.在Navigator中的全局screenOptions回调用获取navigation对象

每个页面的navigation对象是不一样的,所以NavigationHelper的navigation需要一直刷新

<Stack.Navigator
        initialRouteName="AppEntry"
        screenOptions={({navigation}) => {
          //加入该行
          NavigationHelper.navigation = navigation;

          ...

3.监听路由变化,刷新路由栈对象

<NavigationContainer onStateChange={(state: NavigationState) => {
    //加入该行
    //这个是跳转了才去回调,所以不能利用routes来判断路由栈
    NavigationHelper.navRouters = state.routes;
}}>
    <AppNavigator/>
</NavigationContainer>

上面步骤好了之后,就可以在全局使用它的所有静态方法了

注意事项

1.不要在页面刚跳转后使用navRouters来进行判断

navRouters的刷新不是实时的,在新页面的componentDidMount中获取navRouers对象,可能此时还不包括该路由

2.注意该库是默认开启防止重复点击的

有很多情况下,快速点击多下可能会触发多次跳转页面(在android上面出现比较频繁),该库默认会设置0.8s的延迟,0.8s内只能进行一次跳转操作(报错reset replace操作,不包括goBack),同时因为这个特性,在需要短时间内多次触发的场景,应该直接调用NavigationHelper.navigation.dispatch方法进行操作

一个常用的场景就是网络请求的全局拦截器,token过期后,需要跳转到登录页面,此时如果刚好在进行其他跳转操作,就会出现无法跳转到登录界面

Dependents (0)

Package Sidebar

Install

npm i @yz1311/teaset-navigation

Weekly Downloads

1

Version

0.2.4

License

MIT

Unpacked Size

20.6 kB

Total Files

13

Last publish

Collaborators

  • yz1311