用戶
 找回密碼
 立即注冊

QQ登錄

只需一步,快速開始

掃一掃,登錄網站

小程序社區 首頁 教程 查看內容

05年湖人vs小牛比赛录像:Taro+react自定義導航條/Tabbar菜單

湖人vs爵士季后赛 www.nbgeh.club Rolan 2019-11-27 00:38

基于taro自定義導航欄Navbar|仿微信頂部導航|taro自定義tabbar這幾天研究taro發現,官網提供的都是H5、小程序案例,至于RN案例甚少。恰好之前有過react及react-native項目經驗,經過一番探究,終于實現能編譯到多端 ...

基于taro自定義導航欄Navbar|仿微信頂部導航|taro自定義tabbar

這幾天研究taro發現,官網提供的都是H5、湖人vs爵士季后赛案例,至于RN案例甚少。恰好之前有過react及react-native項目經驗,經過一番探究,終于實現能編譯到多端,不過采坑不少,尤其是在RN環境下的樣式問題。

react仿微信web版聊天室: blog.csdn.net/yanxinyun19…

如下圖:在H5/小程序/RN效果均測試通過

項目中用到的圖標都是阿里iconfont字體圖標,下載好后將fonts文件夾拷貝到項目目錄下。

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>

Taro自定義導航欄

在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組件

/*
 * @desc   Taro自定義導航條navbar組件
 * @about  Q:282310962  wx:xy190310
 */

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'

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

<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'},
    ]} 
/>復制代碼

Taro自定義底部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},
    ]}
/>
復制代碼

好了,今天就介紹到這里,后續會考慮使用Taro技術開發個多端實戰項目。

ReactNative聊天APP實戰|仿微信聊天/朋友圈/紅包界面


分享至 : QQ空間
收藏
原作者: xiaoyan2015 來自: 掘金
梦幻西游卖炼妖bb赚钱 白菜彩金论坛网 腾讯分分彩玩法和窍门 创世神曲手游能赚钱吗 网站投注员可以赚钱吗 竞彩篮球大小分玩法 在家搞养殖怎么赚钱 南粤风26选5开奖结果查询 网聊赚钱吗 彩票开奖查询 甘肃11选5结果基本走势 爱彩乐11选5手机版下载 什么传奇最赚钱 奇迹棋牌湖北官方下载 内蒙古快3开奖查询 白小姐六肖中特开奖结果