weigou/weapp/wg-ui/components/NavBar/index.jsx

weigou components

import Taro, { Component } from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
import './index.scss';

/**图片引入 */
import back_black from "../../ui-images/back-black.png";
import back_white from "../../ui-images/back-white.png";
import home_balck from "../../ui-images/home-black.png";
import home_white from "../../ui-images/home-white.png";

export default class NavBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            /**状态栏高度 */
            statusNavHeight: null,
            /**导航栏高度 */
            navBarHeight: null,
            totalHeight: null,
            dataList: [
                {
                    type: 'backBlackIcon',
                    url: back_black,
                    fn: "back"
                },
                {
                    type: 'backWhiteIcon',
                    url: back_white,
                    fn: "back"
                },
                {
                    type: 'homeBlackIcon',
                    url: home_balck,
                    fn: "home"
                },
                {
                    type: 'homeWhiteIcon',
                    url: home_white,
                    fn: "home"
                },
            ]
        };
    }

    componentWillMount() {
        this.setWeappNavbar();
    }
    back() {
        Taro.navigateBack({
            delta: 1
        });
    }
    home() {
        Taro.reLaunch({
            url: this.props.homeUrl
        });
    }
    /**因为taro静态渲染，对动态方法不能识别，所以单独写个方法来判断 */
    goPageFn(item) {
        item.fn === "back" ? this.back() : this.home();
    }
    config = {
        component: true
    };
    /**如果是小程序就需要计算导航栏高度 */
    setWeappNavbar() {
        if (process.env.TARO_ENV === 'h5') return;
        let sysinfo = Taro.getSystemInfoSync();
        let menuButtonObject = Taro.getMenuButtonBoundingClientRect();
        let statusHeight = sysinfo.statusBarHeight;
        let navHeight = menuButtonObject.height + (menuButtonObject.top - statusHeight) * 2;
        let statusNavHeight = `height:${statusHeight}px;`;
        let navBarHeight = `height:${navHeight}px;top:${statusHeight}px;`;
        let totalHeight = `height:${navHeight + statusHeight}px`;
        this.setState({
            statusNavHeight,
            navBarHeight,
            totalHeight
        });
    }
    render() {
        /** 小程序获取的nav高与父组件传进来的样式合并 */
        let navStyle = this.state.navBarHeight + this.props.style;
        /** 小程序获取的status高与父组件传进来的样式合并 */
        let statusStyle = this.state.statusNavHeight + this.props.style;

        return (
            <View style={this.props.style}>
                {/* 小程序的状态栏 start */}
                {
                    process.env.TARO_ENV === 'weapp' &&
                    <View className="wg-fixed wg-nav-top" style={statusStyle}></View>
                }
                {/* 小程序的状态栏 end */}

                <View className='wg-nav-bar wg-space-between' style={navStyle}>

                    {/* 左侧icon start */}
                    {this.state.dataList.map((item, index) => {
                        return this.props.iconType === item.type && <Image src={item.url} className="wg-nav-icon" taroKey={index} onClick={this.goPageFn.bind(this, item)} />;
                    })}
                    {/* 左侧icon end */}


                    {/* 中间标题 start*/}
                    <View className='wg-nav-title'>
                        {this.props.title}
                    </View>
                    {/* 中间标题  end*/}


                    {/* 右侧icon start */}
                    {process.env.TARO_ENV === 'h5' &&
                        <View className="wg-align-items wg-nav-right">

                            {
                                this.props.icon_one_url &&
                                <View className="wg-icon-box wg-mr-24 wg-align-items" onClick={this.props.clickIconOne}>
                                    <Image className="wg-icon" src={this.props.icon_one_url} />
                                </View>
                            }

                            {
                                this.props.icon_two_url &&
                                <View className="wg-icon-box wg-align-items" onClick={this.props.clickIconTwo}>
                                    {<Image className="wg-icon" src={this.props.icon_two_url} />}
                                </View>
                            }

                            {
                                this.props.share &&
                                <View className="wg-share wg-ml-24" onClick={this.props.share}>分享</View>
                            }
                        </View>}
                    {/* 右侧icon end */}

                </View>

                {process.env.TARO_ENV === 'weapp' && <View style={this.state.totalHeight}></View>}
                {process.env.TARO_ENV === 'h5' && <View className="wg-h5"></View>}

            </View>
        );
    }
}


NavBar.defaultProps = {
    /**
     * 支持 h5 和 小程序
     **标题 */
    title: "首页",

    /**
      * 支持 h5 和 小程序
     ** 如果需要跳转到首页需要设置首页路径*/
    homeUrl: null,

    /**
     *  支持 h5 和 小程序
     *  default:"background-color:white;color:#252525;"
     *  导航栏的一些样式，比如 字体大小，导航栏背景
     **/
    style: "background-color:white;color:#252525;",

    /** iconType icon的类型
     *  default:"homeBlackIcon"
     *  支持 h5 和 小程序
     *  backBlackIcon  返回按钮的图片是黑色的
     *  backWhiteIcon  返回按钮的图片是白色的
     *  homeBlackIcon  返回首页按钮的图片是黑色的
     *  homeWhiteIcon  返回首页按钮的图片是白色的
     *
     */
    iconType: "homeBlackIcon",


    /**
     *  只支持h5
     *  分享的事件
     **/
    share: null,

    /**
     *  只支持h5
     *  导航栏右侧的第一张icon
     **/
    icon_one_url: null,

    /**
     * 只支持h5
     * 导航栏右侧的第一张icon的点击事件
     **/
    clickIconOne: null,

    /**
     * 只支持h5
     * 导航栏右侧的第二张icon
     **/
    icon_two_url: null,

    /**
     * 只支持h5
     * 导航栏右侧的第二张icon的点击事件
     **/
    clickIconTwo: null
};