TabBarItem 单个标签项 >=v1.0.0

属性

badge { String|Number }

在图标右上角显示一个红色的气泡。

badgeStyle { View.propTypes.style }

在图标右上角气泡样式。

icon { Image.propTypes.source }

给当前标签指定一个自定义的图标。

renderIcon { function }

() => renderable

自己渲染一个icon，而不用默认图片icon，配置此函数时props.icon不生效。

onPress { function }

当此标签被选中时调用。你应该修改组件的状态来使得selected={true}。

selected { bool }

这个属性决定了子视图是否可见，如果你看到一个空白的页面，很可能是没有选中任何一个标签。

style { View.propTypes.style }

此标签元素样式。

iconStyle { Text.propTypes.style }

标签icon样式。

titleStyle { Text.propTypes.style }

标签标题样式。

title { string }

在图标下面显示的标题文字。

示例

import React, {Component, StyleSheet, View, Text, Image, TabBar} from 'qunar-react-native'

class TabBarExample extends React.Component {
    constructor(props){
        super(props)
        this.state = {
            selectedTab: 'wifi',
            badgeVisible: true,
        }
    }

    renderIcon(tab) {
        const iconfonts = {
            wifi: '\uf04b',
            find: '\uf067',
            money: '\uf238',
        }
        return <Text style={{fontFamily: 'qunar_react_native', fontSize: 22}}>{iconfonts[tab]}</Text>
    }

    render() {
        const tabs = ['wifi', 'find', 'money']

        return (
            <TabBar
                style={styles.tabBar}
                barTintColor="#fff"
            >
                {tabs.map((tab, i) =>
                    <TabBar.item
                        key={i}
                        title={tab}
                        badge={tab === 'find' && this.state.badgeVisible ? '1' : undefined}
                        selected={this.state.selectedTab === tab}
                        onPress = {() => this.onTabPress(tab)}
                        renderIcon={() => this.renderIcon(tab)}
                        titleStyle={{fontSize: 14}}
                        iconStyle={{fontSize: 22}}
                    >
                        {this.renderPageContent(tab)}
                    </TabBar.item>
                )}
            </TabBar>
        )
    }

    renderPageContent(pageText: string) {
        return (
            <View style={styles.pageContainer}>
                <View style={[styles.pageContent, {backgroundColor: getRandomColor()}]}>
                    <Text style={styles.pageContentText}>当前页面: {pageText}</Text>
                </View>
            </View>
        )

        function getRandomColor() {
            var letters = '3456789ABC'.split('');
            var color = '#';
            for (var i = 0; i < 6; i++ ) {
                color += letters[Math.floor(Math.random() * 10)];
            }
            return color;
        }
    }

    onTabPress(tab){
        if(tab === 'find'){
            this.state.badgeVisible = false
        }

        this.setState({
            selectedTab: tab,
            badgeVisible: this.state.badgeVisible
        })
    }
}

const styles = StyleSheet.create({
    tabBar: {
        flex: 1,
        borderTopWidth: 1,
        borderColor: '#ccc',
        backgroundColor: '#ddd'
    },
    pageContainer: {
        flex: 1,
    },
    pageContent: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    pageContentText: {
        fontSize: 20,
        color: '#fff'
    },
})