Taro多端自定义导航栏Navbar+Tabbar实例

运用taro实现多端导航栏/tabbar实例 (h5 + 小程序 + react native)

最近一直在捣鼓taro开发，虽说官网介绍支持编译到多端，但是网上大多数实例都是h5、小程序，很少有支持rn端。恰好taro是基于react技术，想着之前也做过一些react项目，如是抱着好奇深究了一番，采坑了不少，尤其是编译到rn时样式问题。

如上图：分别在h5、小程序、rn端运行效果

◆taro引入阿里字体图标iconfont

在进行下文介绍之前，先简单介绍下taro字体图标的使用，如果你项目中有引入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”></text>

如果是通过变量传递：let back = ‘\ue84c’ <text>{back}</text>

◆自定义导航栏navbar

在项目根目录app.js里面 配置navigation如何提高迅雷下载速度style，将其设置为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: fal,     冬天裙子搭配   lefticon: '\ue84c',        title: ' ',        background: '#6190e8',        color: '#fff',        center: fal,        arch: fal,        archstyle: '',        fixed: fal,        headerright: [],    }    constructor(props) {        super(props)        this.state = {            archtext: '',        }    }        ...    render() {        const { isback, lefticon, title, background, color, center, arch, archstyle, fixed, height, headerright } = this.props        const { archtext } = this.state                let weapp = fal        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>                                        {/* 标题 */}                    {!arch && center && !weapp ? <view classname="flex1" /> : null}                    {arch ?                     (                        <view classname="taro__navbar-arch flex1">                            <input classname="taro__navbar-arch__input" placeholder="搜索..." oninput={this.updateinputtext} style={{color: color, ...archstyle}} />                        </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(archtext)}>                            <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’

支持自定义背景、颜色、左侧图标、标题居中、搜索框，右侧按钮支持图标/文字/图片，还可以设置样式，红点提示、事件处理

<navbar title='taro标题栏' fixed    headerright={[        {icon: '\ue614', style: {color: '#e93b3d'}},        {img: require('../../asts/taro.png'), dot: true, onclick: this.handlecallback},        {icon: '\ue600', style: {marginright: 10}},    ]} />

<navbar isback lefticon={'\ue69f'} title='搜索栏' background='#42b983' color='#fcc' arch    archstyle={{        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('../../asts/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: fal,        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.tstate({currenttabindex: index})}

emmmm~~~，到这里就介绍差不多了，后续会考虑使用taro技术开发个h5/小程序/rn端实战项目。