mutants-mobile-navigator

mutants-mobile-navigator

模块说明

• 通过HOC组件实现顶部导航
• 支持多种应用页面场景流转

依赖模块

• mutants-microfx
• mutants-jsbridge

使用HOC组件（代码示例）

import {TopNavPage} from 'mutants-mobile-navigator';
@TopNavPage
class Test extends React.Component<object,object>{

   /**
    * 头部导航栏相关-可重写的方法
    */

    //是否显示导航栏 默认显示
    navShow(){
        return true;
    }
    //设置标题
    navTitle(){
        return 'test';
    }
    //是否显示回退图标 默认显示
    navLeftIcon(){
        return true;
    }
    //回退事件
    navLeftClick(){
       const returnValue = await new Promise(function (resolve) {
        alert('温馨提示', '您确定要退出此应用？', [
            { text: '取消', onPress: () => resolve(false) },
            { text: '确定', onPress: () => resolve(true) },
        ])
       });
       if(returnValue){
         this.pop();
       }
    }
    //是否显示关闭按钮 默认 history.length > 1?true:false; 
    navCloseShow(){

    }

   /**
    * 导航相关 可直接调用
    */

    testPush = ()=>{
        this.push(pagePath, pageParams);
    }

    testReplace = ()=>{
        this.replace(pagePath, pageParams);
    }

    testPop = ()=>{
        this.pop(); //如果栈里只有一个元素，直接closeApp
    }

    testPageParam = ()=>{
        console.log('从前一页面传递过来的参数',this.pageParam());
    }

    //打开新页面，获取值，返回后调用pageBackReceiveResult
    testPushForResult = (pagePath, pageParams = {})=>{
        this.push(pagePath,pageParams);
    }

    //action 返回的key ，result 返回结果
    pageBackReceiveResult(action, result) {
        console.log('action === result=====',action,result);
    }

    //关闭回传值时调用
    testPopAndReturn(action, result) {
        this.popAndReturn(action,result);
    }

}

使用导航工具类

适用场景

非页面组件，无法使用TopNavPage包裹,在普通组件中完成跳转管理

代码示例

import {NavUtils} from 'mutants-mobile-navigator';

//跳转到新页面取值
NavUtils.pushForResult('second',{source:'index'},(action,result)=>{
    console.log('action === result=====',action,result);
});

//关闭页面并返回值  backResultKey可从pageParam中获取
NavUtils.popAndReturn('backResult',{content:'hello world'},pageParam.backResultKey);

//如果栈里只有一个元素，直接closeApp
NavUtils.pop();