Taro多端自定義導航欄Navbar+Tabbar實例

来源:https://www.cnblogs.com/xiaoyan2017/archive/2019/11/26/11937043.html
-Advertisement-
Play Games

運用Taro實現多端導航欄/tabbar實例 (H5 + 小程式 + React Native) 最近一直在搗鼓taro開發，雖說官網介紹支持編譯到多端，但是網上大多數實例都是H5、小程式，很少有支持RN端。恰好Taro是基於React技術，想著之前也做過一些react項目，如是抱著好奇深究了一番， ...


運用Taro實現多端導航欄/tabbar實例 (H5 + 小程式 + React Native)

最近一直在搗鼓taro開發，雖說官網介紹支持編譯到多端，但是網上大多數實例都是H5、小程式，很少有支持RN端。恰好Taro是基於React技術，想著之前也做過一些react項目，如是抱著好奇深究了一番，採坑了不少，尤其是編譯到RN時樣式問題。

如上圖：分別在H5、小程式、RN端運行效果

◆ Taro引入阿裡字體圖標Iconfont

在進行下文介紹之前，先簡單介紹下taro字體圖標的使用，如果你項目中有引入Taro-UI，直接使用taro-ui圖標即可

詳情看 taro-ui圖標

下載好阿裡字體圖標後，複製fonts文件夾到項目下，如下圖放在：styles目錄下，並將iconfont.css複製一份改為iconfont.scss

引入： import './styles/fonts/iconfont.scss' 

 

在h5、小程式下 這種寫法即可：  <Text className="iconfont icon-back"></Text> 

不過為了相容RN，只能通過Unicode方式這樣寫： <Text className="iconfont">&#xe84c;</Text> 

如果是通過變數傳遞： let back = '\ue84c' <Text>{back}</Text> 

 

◆ 自定義導航欄Navbar

在項目根目錄App.js裡面 配置navigationStyle，將其設置為custom，此時就進入自定義導航欄模式

class App extends Component {
    config = {
        pages: 
            'pages/index/index',
            ...
        ],
        window: {
            backgroundTextStyle: 'light',
            navigationBarBackgroundColor: '#fff',
            navigationBarTitleText: 'Taro',
            navigationBarTextStyle: 'black',
            navigationStyle: 'custom'
        },
        ...
    }
    
    ...
}

在components目錄下新建導航欄Navbar組件

import Taro from '@tarojs/taro'
import { View, Text, Input, Image } from '@tarojs/components'
import classNames from "classnames";
import './index.scss'

export default class NavBar extends Taro.Component {
    // 預設配置
    static defaultProps = {
        isBack: false,
        leftIcon: '\ue84c',
        title: ' ',
        background: '#6190e8',
        color: '#fff',
        center: false,
        search: false,
        searchStyle: '',
        fixed: false,
        headerRight: [],
    }
    constructor(props) {
        super(props)
        this.state = {
            searchText: '',
        }
    }
    
    ...

    render() {
        const { isBack, leftIcon, title, background, color, center, search, searchStyle, fixed, height, headerRight } = this.props
        const { searchText } = this.state
        
        let weapp = false
        if (process.env.TARO_ENV === 'weapp') {
            weapp = true
        }

        return (
            <View className={classNames('taro__navbar', fixed && 'taro__navbar--fixed', fixed && weapp && 'taro__navbar-weapp--fixed')}>
                <View className={classNames('taro__navbar-wrap', fixed && 'taro__navbar-wrap--fixed', weapp && 'taro__navbar-wrap__weapp')} style={{backgroundColor: background}}>
                    {/* 返回 */}
                    <View className={classNames('taro__navbar-left__view', isBack && 'taro__navbar-left__view--isback')}>
                    {isBack &&
                        <TouchView activeOpacity={.5} onClick={this.handleNavigateBack}>
                            <View className="taro__navbar-icon__item"><Text className="iconfont taro__navbar-iconfont" style={{color: color}}>{leftIcon}</Text></View>
                        </TouchView>
                    }
                    </View>
                    
                    {/* 標題 */}
                    {!search && center && !weapp ? <View className="flex1" /> : null}
                    {search ? 
                    (
                        <View className="taro__navbar-search flex1">
                            <Input className="taro__navbar-search__input" placeholder="搜索..." onInput={this.updateInputText} style={{color: color, ...searchStyle}} />
                        </View>
                    )
                    :
                    (
                        <View className={classNames('taro__navbar-title flex1', center && !weapp && 'taro__navbar-title--center')}>
                            {title && <Text className="taro__navbar-title__text" style={{color: color}}>{title}</Text>}
                        </View>
                    )
                    }

                    {/* 右側 */}
                    <View className="taro__navbar-right__view">
                    {headerRight.map((item, index) => (
                        <TouchView activeOpacity={.5} key={index} onClick={()=>item.onClick && item.onClick(searchText)}>
                            <View className="taro__navbar-icon__item">
                                {item.icon && <Text className="iconfont taro__navbar-iconfont" style={{color: color, ...item.style}}>{item.icon}</Text>}
                                {item.text && <Text className="taro__navbar-iconfont__text" style={{color: color, ...item.style}}>{item.text}</Text>}
                                {item.img && <Image className="taro__navbar-iconfont__img" src={item.img} mode='aspectFit' />}
                                {/* 圓點 */}
                                {!!item.badge && <Text className="taro__badge taro__navbar-badge">{item.badge}</Text>}
                                {!!item.dot && <Text className="taro__badge-dot taro__navbar-badge--dot"></Text>}
                            </View>
                        </TouchView>
                    ))
                    }
                    </View>
                </View>
            </View>
        );
    }
}

在頁面引入組件即可： import NavBar from '@components/navbar' 

引入方式有兩種：

// index/index.js  首頁

import NavBar from '@components/navbar'

class Index extends Component {
    config = {
        navigationBarTitleText: '首頁',
        usingComponents: {
            'navbar2': '../../components/navbar', // 書寫第三方組件的相對路徑
        },
    }
    render () {
    return (
        <View className='index'>
            { /* 方法一 */  }
            <NavBar />

            { /* 方法二 */  }
            <navbar2 />

            ...
        </View>
    )
  }
}

 支持自定義背景、顏色、左側圖標、標題居中、搜索框，右側按鈕支持圖標/文字/圖片，還可以設置樣式，紅點提示、事件處理

<NavBar title='Taro標題欄' fixed
    headerRight={[
        {icon: '\ue614', style: {color: '#e93b3d'}},
        {img: require('../../assets/taro.png'), dot: true, onClick: this.handleCallback},
        {icon: '\ue600', style: {marginRight: 10}},
    ]} 
/>

<NavBar isBack leftIcon={'\ue69f'} title='搜索欄' background='#42b983' color='#fcc' search
    searchStyle={{
        backgroundColor:'rgba(255,255,255,.6)', borderRadius: Taro.pxTransform(50), color: '#333'
    }}
    headerRight={[
        {icon: '\ue622', style: {color: '#6afff9'}},
        {icon: '\ue63a'},
    ]} 
/>

<NavBar isBack leftIcon={'\ue84f'} title='查找' background='#545454' color='#fff'
    headerRight={[
        {img: require('../../assets/default-avatar.png'), dot: true},
        {text: '添加朋友', style: {color: '#15e413'}},
    ]} 
/>

◆ 自定義底部Tabbar菜單

如果在App.js裡面沒有配置tabbar，則可以自定義底部，如下圖在三端下效果

同樣在components目錄下新建tabbar組件

import Taro from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import classNames from 'classnames'
import './index.scss'

export default class TabBar extends Taro.Component {
    // 預設參數配置
    static defaultProps = {
        current: 0,
        background: '#fff',
        color: '#999',
        tintColor: '#6190e8',
        fixed: false,
        onClick: () => {},
        tabList: []
    }
    constructor(props) {
        super(props)
        this.state = {
            updateCurrent: props.current
        }
    }
    ...

    render() {
        const { background, color, tintColor, fixed } = this.props
        const { updateCurrent } = this.state
        
        return (
            <View className={classNames('taro__tabbar', fixed && 'taro__tabbar--fixed')}>
                <View className={classNames('taro__tabbar-list', fixed && 'taro__tabbar-list--fixed')} style={{backgroundColor: background}}>
                    {this.props.tabList.map((item, index) => (
                        <View className="taro__tabbar-item taro__tabbar-item--active" key={index} onClick={this.updateTabbar.bind(this, index)}>
                            <View className="taro__tabbar-icon">
                                <Text className="iconfont taro__tabbar-iconfont" style={{color: updateCurrent == index ? tintColor : color}}>{item.icon}</Text>
                                {/* 圓點 */}
                                {!!item.badge && <Text className="taro__badge taro__tabbar-badge">{item.badge}</Text>}
                                {!!item.dot && <Text className="taro__badge-dot taro__tabbar-badge--dot"></Text>}
                            </View>
                            <Text className="taro__tabbar-title" style={{color: updateCurrent == index ? tintColor : color}}>{item.title}</Text>
                        </View>
                    ))}
                </View>
            </View>
        );
    }
}

自定義tabbar也支持自定義背景、顏色、圖標，點擊選項事件返回索引值

<TabBar current={currentTabIndex} background='#f8f8f8' color='#999' tintColor='#6190e8' fixed onClick={this.handleTabbar}
    tabList={[
        {icon: '\ue627', title: '首頁', badge: 8},
        {icon: '\ue61e', title: '商品'},
        {icon: '\ue605', title: '個人中心', dot: true},
    ]}
/>

// tabbar事件

handleTabbar = (index) => { this.setState({currentTabIndex: index}) }

emmmm~~~，到這裡就介紹差不多了，後續會考慮使用Taro技術開發個h5/小程式/RN端實戰項目。

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery之概念以及基本使用
    1. jQuery的概述 1.1 jQuery的概念 jQuery是一個快速、簡潔的JavaScript庫，其設計的宗旨是“Write Less，Do More” jQuery主要是封裝了JavaScript常用的功能代碼，優化了DOM操作、時間處理、動畫設計和Ajax交互。 學習jQuery的本質 ...
  • vue瀏覽器全屏實現
    1、項目中使用的是sreenfull插件，執行命令安裝 npm install --save screenfull 2、安裝好後，引入項目，用一個按鈕進行控制即可，按鈕方法如下： toggleFullscreen() { if (!screenfull.enabled) { this.$messag ...
  • JavaScript操作資料庫JS操作Access資料庫
    avaScript操作資料庫JS操作Access資料庫，跟其他語言操作差不多，總結了一下習慣代碼，僅供參考學習。現在在F盤有文件abc.mdf，表名為Student，一共2個欄位，Id數字類型主鍵，stuName文本類型，現對該表進行增刪改查的操作： 1.查詢<HTML><HEAD><TITLE>數 ...
  • layui常用的驗證
    var LayVerifyExtend = { notnullNonnegativeInteger: function (value, item) { //value：表單的值、item：表單的DOM對象 if (!/^-?(?:\d+|\d{1,3}(?:,\d{3})+)(?:\d+)?$/.t ...
  • layui 集成第三方和自定義組件到模塊規範
    1、新建一個layui.extend.js文件，頁面調用時這個文件放到layui.js後面。 2、基礎的配置卸載config中，擴展的組件寫入extend，組件的路徑是相對於config下base的路徑。 例如： layui.config({ version: false, //一般用於更新模塊緩存 ...
  • rem佈局
    rem佈局 1. 技術選型 方案：採取單獨製作移動頁面方案 技術：佈局採取rem適配佈局（less rem+媒體查詢） 設計圖紙：750px尺寸 2. 相關文件夾結構 3. 設置視口標簽以及引入初始化央視 ~~~html ~~~ 4. 設置公共的common.less文件 設置好最常見的屏幕尺寸，利 ...
  • 對於隱藏性質的非標準的動態 id 的下拉框，如何定位和選中
    今天，在頁面上碰到一個非 select 標簽的下拉框，打算進行定位和模擬選中。 <input aria-invalid="false" autocomplete="disabled" placeholder="請選擇" type="text" class="AABBCC-input DDCC-inp ...
  • webpack關於CommonsChunkPlugin在高版本被移除的替代方案問題
    1.在指南的緩存章節里webpack.config.js文件中，使用new的方法會報錯 const webpack = require('webpack'); + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor' + }), new ...
一周排行
    -Advertisement-
    Play Games
  • C#自增運算符詳解：++i與i++的區別及應用場景
    概述：在C#中，++i和i++都是自增運算符，其中++i先增加值再返回，而i++先返回值再增加。應用場景根據需求選擇，首碼適合先增後用，尾碼適合先用後增。詳細示例提供清晰的代碼演示這兩者的操作時機和實際應用。 在C#中，++i 和 i++ 都是自增運算符，但它們在操作上有細微的差異，主要體現在操作的 ...
  • Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET 版本
    上次發佈了：Taurus.MVC 性能壓力測試（ap 壓測 和 linux 下wrk 壓測）：.NET Core 版本，今天計劃準備壓測一下 .NET 版本，來測試並記錄一下 Taurus.MVC 框架在 .NET 版本的性能，以便後續持續優化改進。 為了方便對比，本文章的電腦環境和測試思路，儘量和... ...
  • 一文讀懂.NET WebAPI中FromRoute、FromQuery、FromBody的關鍵角色與用法
    .NET WebAPI作為一種構建RESTful服務的強大工具，為開發者提供了便捷的方式來定義、處理HTTP請求並返迴響應。在設計API介面時，正確地接收和解析客戶端發送的數據至關重要。.NET WebAPI提供了一系列特性，如[FromRoute]、[FromQuery]和[FromBody]，用 ...
  • WPF/C#實現圖像濾鏡優化方案：打造炫目視覺體驗！
    原因：我之所以想做這個項目，是因為在之前查找關於C#/WPF相關資料時，我發現講解圖像濾鏡的資源非常稀缺。此外，我註意到許多現有的開源庫主要基於CPU進行圖像渲染。這種方式在處理大量圖像時，會導致CPU的渲染負擔過重。因此，我將在下文中介紹如何通過GPU渲染來有效實現圖像的各種濾鏡效果。 生成的效果 ...
  • Bogus 實戰：使用 Bogus 和 EFCore 生成模擬數據和種子數據【完整教程】
    引言 上一章我們介紹了在xUnit單元測試中用xUnit.DependencyInject來使用依賴註入，上一章我們的Sample.Repository倉儲層有一個批量註入的介面沒有做單元測試，今天用這個示例來演示一下如何用Bogus創建模擬數據 ，和 EFCore 的種子數據生成 Bogus 的優 ...
  • WPF隨筆收錄-實時繪製心率曲線
    一、前言 在自己的項目中，涉及到實時心率曲線的繪製，項目上的曲線繪製，一般很難找到能直接用的第三方庫，而且有些還是定製化的功能，所以還是自己繪製比較方便。很多人一聽到自己畫就害怕，感覺很難，今天就分享一個完整的實時心率數據繪製心率曲線圖的例子；之前的博客也分享給DrawingVisual繪製曲線的方 ...
  • wpf程式修改啟動入口註意事項
    如果你在自定義的 Main 方法中直接使用 App 類並啟動應用程式，但發現 App.xaml 中定義的資源沒有被正確載入，那麼問題可能在於如何正確配置 App.xaml 與你的 App 類的交互。 確保 App.xaml 文件中的 x:Class 屬性正確指向你的 App 類。這樣，當你創建 Ap ...
  • 記一次 .NET某爐膛鍋爐檢測系統 崩潰分析
    一：背景 1. 講故事 上個月有個朋友在微信上找到我，說他們的軟體在客戶那邊隔幾天就要崩潰一次，一直都沒有找到原因，讓我幫忙看下怎麼回事，確實工控類的軟體環境複雜難搞，朋友手上有一個崩潰的dump，剛好丟給我來分析一下。 二：WinDbg分析 1. 程式為什麼會崩潰 windbg 有一個厲害之處在於 ...
  • 一個.NET內置依賴註入的小型強化版
    前言 .NET生態中有許多依賴註入容器。在大多數情況下，微軟提供的內置容器在易用性和性能方面都非常優秀。外加ASP.NET Core預設使用內置容器，使用很方便。 但是筆者在使用中一直有一個頭疼的問題：服務工廠無法提供請求的服務類型相關的信息。這在一般情況下並沒有影響，但是內置容器支持註冊開放泛型服 ...
  • WPF隨筆收錄-DataGrid固定右側列
    一、前言 在項目開發過程中，DataGrid是經常使用到的一個數據展示控制項，而通常表格的最後一列是作為操作列存在，比如會有編輯、刪除等功能按鈕。但WPF的原始DataGrid中，預設只支持固定左側列，這跟大家習慣性操作列放最後不符，今天就來介紹一種簡單的方式實現固定右側列。（這裡的實現方式參考的大佬 ...
所有分類