NavigationBarButton

CRN 提供了默认导航栏按钮，样式固定，宽高相等（iPhone5上44x44，其他屏幕自动缩放），提供两种样式：

纯文本按钮
图片按钮

使用者不用关心按钮与导航栏如何绑定，只需要传入在this.leftButton和this.rightButtons具体按钮即可。

// 示例
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.leftButton = 
<
NavigationBarButton type = {'icon_back'} onPress = {() =
>
 {}}/
>
;
        this.rightButtons = [
<
NavigationBarButton type = {'icon_phone'}/
>
, 
<
NavigationBarButton type = {'icon_phone_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

纯文本按钮

纯文本按钮支持文字长度为1-4，2个文字及以下按钮大小为44x44，3字及以上按钮大小为88x44,具体效果如下：

对应示例代码：

// 两个字
constructor(props) {
    super(props);
    this.rightButtons = [
<
NavigationBarButton
>
编辑
<
/NavigationBarButton
>
];
}

// 四个字
constructor(props) {
    super(props);
    this.rightButtons = [
<
NavigationBarButton
>
我的收藏
<
/NavigationBarButton
>
];
}

图片按钮

直接使用了 Native 资源，样式与 Native 一致，使用NavigationBarButton并且传入type属性即可获得对应按钮。图片按钮大小固定为44x44。

type {String} 按钮类型，支持类型列表：
icon_back 箭头返回按钮
icon_home 首页按钮
icon_home_text 首页按钮，icon 下面带文字
icon_phone 打电话按钮
icon_phone_text 打电话按钮，icon 下面带文字
icon_favorite 收藏按钮
icon_favorite_text 收藏按钮，icon 下面带文字
icon_favorited 已收藏按钮
icon_favorited_text 已收藏按钮，icon 下面带文字
icon_share 分享按钮
icon_share_text 分享按钮，icon 下面带文字
icon_search 搜索按钮，
icon_search_text 搜索按钮，icon 下面带文字
icon_more 更多按钮（三个点），
icon_more_text 更多按钮（三个点），icon 下面带文字
icon_customer_service 客服按钮，
icon_customer_service_text 客服按钮，icon 下面带文字
icon_location 定位按钮

具体效果如下：

示例代码如下：

// 电话按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_phone'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_phone_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 首页按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_home'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_home_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 收藏按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_favorite'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_favorite_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 已收藏按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_favorited'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_favorited_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 分享按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_share'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_share_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 搜索按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_search'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_search_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 更多按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_more'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_more_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 客服按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_customer_service'} onPress = {() =
>
 {}}/
>
, 
<
NavigationBarButton type = {'icon_customer_service_text'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

// 定位按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.rightButtons = [
<
NavigationBarButton type = {'icon_location'} onPress = {() =
>
 {}}/
>
];
    }

    ...
}

自定义导航栏按钮

如果默认的按钮不能满足你的需求，你也可以使用Button组件自定义按钮。

左侧返回按钮

NavigationBar组件默认绑定了带箭头的返回按钮，并且绑定了Page的this.pop()事件返回上一页，如果你需要自定义返回按钮只需要把自定义的按钮传入this.leftButton即可：

//自定义左侧返回按钮
export default class Page1 extends Page {
    constructor(props) {
        super(props);
        this.leftButton = (
<
Button
                        imageSource = {{uri:'common_btn_back_arrow'}}
                        imageStyle = {{width:22, height:22}}
                        imageInset = {{top:11, right:11, bottom: 11, left:11}}
                        style={{width:44, height:44, backgroundColor:'red'}}
                        onPress = {() =
>
 {this.pop();}}

>
<
/Button
>
);

    }

    ...
}

左侧返回按钮事件

默认的返回按钮会调用Page类的this.pop()方法，这个方法会处理返回事件，如果你需要在返回前执行其他任务，你只需要在子类重写这个方法即可，在执行完任务后调用super.pop()即可。

示例：

export default class Page1 extends Page {
    pop() {
        //do some task.
        ...
        super.pop();//调用父类的返回方法。
    }
}

NavigationBarButton