運(yùn)行結(jié)果：

Simulator Screen Shot 2017年6月1日 上午10.33.30.png

代碼：

import React, {
    Component,

} from 'react';
import {
    TabBarIOS,
    NavigatorIOS,
    View,
    Image,
    StyleSheet,

} from 'react-native';

class App extends Component {
    // 構(gòu)造
      constructor(props) {
        super(props);
        // 初始狀態(tài)
        this.state = { selectedBarItem:0 }
      }
    render() {
        return (
            <View style={styles.container}>
                {/*tabbar 標(biāo)簽欄*/}
                <TabBarIOS
                    // unselectedTintColor="white" /* 當(dāng)前沒(méi)有被選中的標(biāo)簽圖標(biāo)的顏色捣鲸。僅在iOS 10及以上版本有效*/
                    tintColor="red" /* 標(biāo)簽圖標(biāo)的顏色*/
                    barTintColor="black" /* 標(biāo)簽欄的背景色*/
                    translucent={true}/* 半透明*/>

                    <TabBarIOS.Item
                        title="看點(diǎn)"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_circle.png')}
                        selectedIcon={require('./images/tab_bar_item_circle_select.png')}
                        selected={this.state.selectedBarItem == 0}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:0
                            });
                        }}
                        >
                        <View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>

                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="廣場(chǎng)"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_news.png')}
                        selectedIcon={require('./images/tab_bar_item_news_select.png')}
                        selected={this.state.selectedBarItem == 1}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:1
                            });
                        }}
                    >
                        <View style={[styles.conViewStyle, {backgroundColor:'red'}]}>

                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="發(fā)現(xiàn)"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_discover.png')}
                        selectedIcon={require('./images/tab_bar_item_discover_select.png')}
                        selected={this.state.selectedBarItem == 2}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:2
                            });
                        }}
                    >
                        <View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>

                        </View>
                    </TabBarIOS.Item>

                    <TabBarIOS.Item
                        title="我"
                        renderAsOriginal={true}
                        icon={require('./images/tab_bar_item_personal.png')}
                        selectedIcon={require('./images/tab_bar_item_personal_select.png')}
                        selected={this.state.selectedBarItem == 3}
                        onPress={()=>{
                            this.setState({
                                selectedBarItem:3
                            });
                        }}
                    >
                        <View style={[styles.conViewStyle, {backgroundColor:'red'}]}>

                        </View>
                    </TabBarIOS.Item>

                </TabBarIOS>
            </View>
        );
    }
}

var styles = StyleSheet.create({
    container:{
        flex:1,
        alignContent:'center',
    },
    conViewStyle:{
        flex:1,
        justifyContent:'center',
        alignContent:'center',
    }
});
module.exports = App;

注意點(diǎn)：

1. TabBarIOS.Item 中要添加對(duì)應(yīng)的View证薇，否則會(huì)報(bào)錯(cuò)

<TabBarIOS.Item
                      title="看點(diǎn)"
                      renderAsOriginal={true}
                      icon={require('./images/tab_bar_item_circle.png')}
                      selectedIcon={require('./images/tab_bar_item_circle_select.png')}
                      selected={this.state.selectedBarItem == 0}
                      onPress={()=>{
                          this.setState({
                              selectedBarItem:0
                          });
                      }}
                      >
                      <View style={[styles.conViewStyle, {backgroundColor:'yellow'}]}>

                      </View>
                  </TabBarIOS.Item>