导航栏

Router 默认提供了接近 iOS 原生样式的导航栏（类似 NavigatorIOS）。可以通过配置 Ext.defaults.navBar.isShow = true 来使用。

全局配置

// 配置全局导航栏
Ext.defaults.navBar = {
    // 是否显示，默认为 false，不显示
    isShow: true,
    // 背景色，默认 Qunar 蓝
    backgroundColor: 'red',
    // 导航栏文字颜色，默认白色
    color: 'black',
    // 导航栏高度,默认44(不包括状态栏高度)
    height: 80,
    //左右按钮宽度,默认60
    buttonWidth:60,
    //状态栏背景色,默认透明
    statusBarBackgroundColor:'transparent',
    // 导航栏按钮点击不透明度，默认 0.6
    activeOpacity: 0.8,
    // 左侧按钮文字,默认'返回'
    leftButtonText: '<back'
};

页面级配置

页面的routerPlugin可以覆盖全局配置的任意一项，并且新增了标题、导航栏左右按键和页面样式的相关配置。

class base extends QView {
    // 配置页面导航栏
    static routerPlugin = {
        // 是否显示导航栏
        isShow: true,
        // 背景色，默认 Qunar 蓝
        backgroundColor: 'red',
        // 文本颜色，默认白色
        color: 'black',
        // 按钮宽度
        buttonWidth:60,
        // 状态栏背景色
        statusBarBackgroundColor:'red',
        // 导航栏高度
        height:80,
        //activeOpacity
        activeOpacity:0.6
        // 标题，默认route.name
        // 支持传入多种参数:
        // 字符串;
        // 返回JSX的函数,接受store作为参数:
        // (store)=>(<TouchableOpacity onPress={()=>alert('custom jsx')}>
        //    <Text>test</Text>
        // </TouchableOpacity>)
        // JSX
        title: 'Base',
        // 左侧按钮，默认为字符串'返回'
        // 同样支持传入字符串/函数/JSX
        leftButtonText: <Text>返回</Text>,
        // 左侧按钮点击事件，默认 `Ext.back()`
        // 接受一个参数store
        leftButtonPressEvent(store) {
            alert('left...')
        },
        // 右侧按钮文字，默认空字符串
        // 同样支持传入字符串/函数/JSX
        rightButtonText(store){
          return (
            <Text>test</Text>
          );
        },
        // 右侧按钮点击事件，默认空函数
        rightButtonPressEvent(store) {
            alert('right...');
        }
    };
}

标题设置

setTitle(title)

设置当前页面导航栏的标题。

• title String/Function/JSX 使用方式与配置里面的title完全一致

举例：

//传入字符串
Ext.Router.setTitle('new Title');
//传入JSX
Ext.Router.setTitle(
  <Text>new Title</Text>
);
//传入返回JSX的函数
Ext.Router.setTitle((store)=>(
  <Text>Test</Text>
));

由于 JavaScript 和 Native 之间的异步通信问题，在给当前页面通过 setTitle 设置标题时，请在当前页面的 actived 生命周期之后调用（包括 actived）

open(viewName, {title})

打开新页面并设置新页面的标题。

• title String 标题

举例：

Ext.open('pageA', {
    title: 'new Title',
});