實現效果如下：

          點選選項卡可以切換並且改變上面頁面的顏色、選中圖示的顏色、圖示

首先需要安裝：

npm install react-native-tab-navigator --save

然後在需要做導航欄的檔案引入：

import TabNavigator from 'react-native-tab-navigator'

現在可以開始開發導航欄了，這是我做的這個例子的完整程式碼：

import React, {Component} from 'react';
import {StyleSheet, View,Text,Image} from 'react-native';
import TabNavigator from 'react-native-tab-navigator'

export default class App extends Component<Props> {
  /*初始化state*/
  constructor(props){
      super();
      this.state={
        selectedTab:'tb_msg',
      }
  }
    /**
     * 公共元件方法
     * @param selectedTab 選中的tab
     * @param title
     * @param icon
     * @param selectedIcon
     * @param imageStyle  選中時渲染圖示的顏色
     * @param mark  角標
     * @param viewContent  頁面內容
     * @returns {*}
     */
  tabNavigatorItems(selectedTab,title,icon,selectedIcon,imageStyle,mark,viewContent){
      return (
          <TabNavigator.Item
              selected={this.state.selectedTab === selectedTab }
              title={title}
              renderIcon={()=> <Image style={styles.myImage} source={icon}/> }
              renderSelectedIcon={()=> <Image style={[styles.myImage,{tintColor:imageStyle}]} source={selectedIcon}/> }
              badgeText={mark}
              onPress={()=> this.setState({selectedTab:selectedTab}) }>
              <View style={{flex:1}}><Text>{viewContent}</Text></View>
          </TabNavigator.Item>
      )
  }

  render() {
    return (
      <View style={styles.container}>
         <TabNavigator>
            {this.tabNavigatorItems('tb_msg',"訊息",require('./images/msg.png'),require("./images/selected_msg.png"),'#ffe09a',"1","訊息頁面內容")}
            {this.tabNavigatorItems('tb_contacts',"聯絡人",require('./images/contacts.png'),require("./images/selected_contacts.png"),'#65bb74',"","聯絡人頁面內容")}
            {this.tabNavigatorItems('tb_watch',"看點",require('./images/wacth.png'),require("./images/selected_watch.png"),'#6ebef3',"","看點頁面內容")}
            {this.tabNavigatorItems('tb_dynamic',"動態",require('./images/dynamic.png'),require("./images/selected_dynamic.png"),'#622193',"","動態頁面內容")}
         </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },
    myImage:{
        width:22,
        height:22,
    }
});

 

下面是元件的屬性和描述

TabNavigator props：

TabNavigator.Item props：