首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >React Native一些自己封装的react navigation导航器常用的工具函数

React Native一些自己封装的react navigation导航器常用的工具函数

作者头像
henu_Newxc03
发布2022-05-05 18:09:19
发布2022-05-05 18:09:19
1.5K0
举报

使用方法 ,创建一个NavigationUtil.js的文件,把代码复制过去

代码语言:javascript
复制
import React, {Component} from 'react';

class NavigationUtil extends Component {
  /**
   *跳转到指定页面
   */
  static goPage(params, page) {
    const navigation = NavigationUtil.navigation;
    console.log('NavigationUtil中的navigation', navigation);
    if (!navigation) {
      console.log('NavigationUtil.navigation can not be null');
    }
    navigation.navigate(page, {
      ...params,
    });
  }

  /**
   * 返回上一页
   * @param navigation
   */
  static goBack(navigation) {
    navigation.goBack();
  }

  /**
   * 重置到首页
   * @param params
   */
  static resetToHomePage(params) {
    const {navigation} = params;
    navigation.navigate('HomePage');
  }
}

export default NavigationUtil;

使用之前还需要初始化一下,创建一个HomePage页面贴上这个代码NavigationUtil.navigation = props.navigation;

代码语言:javascript
复制
import React from 'react';
import DynamicTabNavigator from '../navigator/DynamicTabNavigator';
import NavigationUtil from '../navigator/NavigationUtil';

function HomePage(props) {
  NavigationUtil.navigation = props.navigation;
  return <DynamicTabNavigator />;
}

export default HomePage;

使用示例

代码语言:javascript
复制
	onClick(()=>{
		NavigationUtil.goPage(
            {
            	//这里放传递过去的参数
            },
            'DetailPage',//这里用自己写的页面组件替换
          );
	})
代码语言:javascript
复制
	onClick(()=>{
		 NavigationUtil.goBack(this.props.navigation);//括号里传个navigation
	})
代码语言:javascript
复制
//这个常用于开屏广告
componentDidMount() {
    this.timer = setTimeout(() => {
      //  跳转到首页
      NavigationUtil.resetToHomePage(this.props);
    }, 200);
  }
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-04-30,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档