image.png

import React, { useState, useEffect } from "react";
import Taro, { useRouter, useDidShow } from "@tarojs/taro";
import { Input, View } from "@tarojs/components";
import { AtNavBar } from 'taro-ui'
import './index.scss'

function NavBar(porps) {
    // 獲取系統(tǒng)信息
    const systemInfo = Taro.getSystemInfoSync();
    // 膠囊按鈕位置信息
    const menuButtonInfo = Taro.getMenuButtonBoundingClientRect();
    // 導(dǎo)航欄高度 = 狀態(tài)欄到膠囊的間距（膠囊距上距離-狀態(tài)欄高度） * 2 + 膠囊高度 + 狀態(tài)欄高度
    const [info, setInfo] = useState([0, 0, 0, 0, '#FFF', '#000']);// 導(dǎo)航欄高度 ,膠囊距右方間距（方保持左剑令、右間距一致）,膠囊距底部間距（保持底部間距一致）,膠囊高度（自定義內(nèi)容可與膠囊高度保證一致）
    const [type, setType] = useState('text');
    let _navBarHeight = ((menuButtonInfo.top - systemInfo.statusBarHeight) * 2 + menuButtonInfo.height + systemInfo.statusBarHeight) || 0;
    let _menuRight = (systemInfo.screenWidth - menuButtonInfo.right) || 0;
    let _menuBotton = (menuButtonInfo.top - systemInfo.statusBarHeight) || 0;
    let _menuHeight = (menuButtonInfo.height) || 0;
    useEffect(() => {
        let _bgColor = '#FFF'; //背景
        let _color = '#000'; // 字體顏色
        let _type = 'text'; // 組建類(lèi)型
        if (porps.bgColor) _bgColor = porps.bgColor;
        if (porps.color) _color = porps.color;

        setInfo([_navBarHeight, _menuRight, _menuBotton/2, _menuHeight, _bgColor, _color]);
        if (porps.type) _type = porps.type;
        return () => { };
    }, []);

    return (
        <View>
            <View className="nav-bar" style={{ height: `${info[0]}px`, background: `${info[4]}` }}>
                {
                    // bottom: `${info[2]}px`
                    type == 'text' ? <View className="text"  style={{ height: `${info[3]}px`, minHeight: `${info[3]}px`, lineHeight: `${info[3]}px`, bottom: `${info[2]}px`, color: `${info[5]}` }}>{porps.title}</View> :
                        <Input className="search" placeholder="輸入關(guān)鍵詞烁设！" style={{ height: `${info[3]}px`, minHeight: `${info[3]}px`, lineHeight: `${info[3]}px`, left: `${info[1]}px`, bottom: `${info[2]}px`, color: `${info[5]}` }}></Input>
                }
            </View>
            {/* 是否頂起頂部高度 */}
            {
                porps.seize ? <View className="content" style={{ height: `${info[0]}px` }}></View> : null
            }
        </View>
    );
}

export default NavBar;

.nav-bar{ position: fixed; width: 100%; top: 0; z-index: 1000;border-bottom: solid 1px #f8f8f8;}
.nav-bar .search{ width: 60%;  font-size: 32px; background: #fff; position: absolute; border-radius: 50px; background: #ddd; padding-left: 14px;}
.nav-bar .text{ width: 100%;  font-size: 32px; background: #fff; position: absolute; text-align: center;}