TabBarItem 单个标签项 >=v1.0.0

使用说明

基本用法

在 TabBar 渲染的容器内渲染出一个标签项。

<TabBar>
    {[
        <TabBar.item
            key={0}
            title='hello'
            icon={{uri: require('QImageSet').loading}}
            titleStyle={{fontSize: 14}}
            iconStyle={{fontSize: 22}}
            selected
        >
            <View style={{
                flexGrow: 1,
                justifyContent: 'center',
                alignItems: 'center',
                backgroundColor: 'red',
            }}>
                <Text style={{ color: '#fff' }}>Wifi</Text>
            </View>
        </TabBar.item>
    ]}
</TabBar>

注意：即使只有一个标签，所有标签项也需要通过由 TabBar.Item 组成的数组项列举出来。

自定义样式

分别在 titleStyle、 iconStyle 和 badgeStyle 属性中设置标签的标题样式、图标样式和图标右上角红色的气泡样式。不过，当前被选中的标签图标的颜色需要在 TabBar 组件的 tintColor 属性中设置。

另外，可以通过给 icon 属性传入一个图片地址或者给renderIcon 属性传入一个返回JSX形式图标的函数的方式自定义标签项的图标。

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
                tintColor='red'
            >
                {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) {
        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'
    },
});

属性

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 }==

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