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

使用方法 ，创建一个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);
  }

navigation

0 人点赞