react native TabBarIOS 使用详解

TabBarIOS 仅限于ios平台。

barTintColor：背景颜色
tintColor：选中标签的颜色
unselectedItemTintColor：未选中标签的颜色
translucent：是否半透明

TabBarIOS.Item

badge：图标右上角显示一个红色的圆圈，中间是数字
onPress：点击回调
selected：是否选中
selectedIcon：选中图标
icon：图标
systemIcon：系统图标，覆盖icon和title，值：(‘bookmarks’, ‘contacts’, ‘downloads’, ‘favorites’, ‘featured’, ‘history’, ‘more’, ‘most-recent’, ‘most-viewed’, ‘recents’, ‘search’, ‘top-rated’)
title：图标下文字

/** * Created by![这里写图片描述](http://img.blog.csdn.net/20170523112925375?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbWVuZ2tzMTk4Nw==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast) on 2017/5/22. */import React, {Component} from 'react';import {    StyleSheet,    View,    TabBarIOS,    Text,    Button,} from 'react-native';export default class TabBarIOSDemo extends Component {    static navigationOptions = {        title: 'TabBarIOS',    };    state = {        selectValue: 'tab1',        systemIcon:'bookmarks',    }    _onValueChange = (value) => {        this.setState({selectValue: value});    }    render() {        return (            <TabBarIOS                barTintColor='black'                tintColor="red"                unselectedItemTintColor="blue"                translucent={true}>                <TabBarIOS.Item                    badge='23'                    selected={this.state.selectValue == 'tab1'}                    systemIcon={this.state.systemIcon}                    onPress={()=>this._onValueChange('tab1')}>                    <View style={{flex:1}}>                        <View style={{flexDirection:'row',alignItems:'center',flexWrap:'wrap'}}>                            <Text>设置systemIcon：</Text>                            <Button title='bookmarks' onPress={()=>{this.setState({systemIcon:'bookmarks'})}}/>                            <Button title='contacts' onPress={()=>{this.setState({systemIcon:'contacts'})}}/>                            <Button title='downloads' onPress={()=>{this.setState({systemIcon:'downloads'})}}/>                            <Button title='favorites' onPress={()=>{this.setState({systemIcon:'favorites'})}}/>                            <Button title='featured' onPress={()=>{this.setState({systemIcon:'featured'})}}/>                            <Button title='history' onPress={()=>{this.setState({systemIcon:'history'})}}/>                            <Button title='more' onPress={()=>{this.setState({systemIcon:'more'})}}/>                            <Button title='most-recent' onPress={()=>{this.setState({systemIcon:'most-recent'})}}/>                            <Button title='most-viewed' onPress={()=>{this.setState({systemIcon:'most-viewed'})}}/>                            <Button title='recents' onPress={()=>{this.setState({systemIcon:'recents'})}}/>                            <Button title='search' onPress={()=>{this.setState({systemIcon:'search'})}}/>                            <Button title='top-rated' onPress={()=>{this.setState({systemIcon:'top-rated'})}}/>                        </View>                    </View>                </TabBarIOS.Item>                <TabBarIOS.Item                    selected={this.state.selectValue == 'tab2'}                    icon={require('../../imgs/icon1.png')}                    title='tab2'                    onPress={()=>this._onValueChange('tab2')}>                    <View style={{flex:1,backgroundColor:'blue'}}></View>                </TabBarIOS.Item>                <TabBarIOS.Item                    selected={this.state.selectValue == 'tab3'}                    systemIcon='recents'                    onPress={()=>this._onValueChange('tab3')}>                    <View style={{flex:1,backgroundColor:'green'}}></View>                </TabBarIOS.Item>            </TabBarIOS>        );    }}

github下载地址