React Native 官方文檔

React Native 開源社區

TabBarIOS常見的屬性

** View** 的所有屬性都可使用
** barTintColor ** 背景顏色
** tintColor ** 被選中圖標的顏色
** translucent** 半透明的效果

TabBarIOS.Item常見的屬性

** badge** 類似角標
** icon Image.propTypes.source Tab**
** onPress **
selected
**electedIcon Image.propTypes.source **
**style **
**systemIcon ** 系統默認圖標
enum('bookmarks','contacts','downloads','favorites','featured','history','more','most-recent','most-viewed','recents','search','top-rated')
** title **

Simulator Screen Shot.png

  import React, { Component } from 'react';
  import {
    AppRegistry, //負責入口組件
    StyleSheet, //負責創建樣式表
    View,
    Text,
    Image,
    TabBarIOS
  } from 'react-native';

  var ViewController = React.createClass({
    
      //設置初始值
      getInitialState(){
        return{
          //默認被選中的tabBArItem
          selectedTabBarItem: 'home'
        }
      },

    render() {
      return (
        <View style={styles.container}>
        {/*導航欄視圖*/}
         <View style={styles.headerStyle}>
           <Text style={styles.navTextStyle}>Tab選項卡切換</Text>
         </View>

      {/*選項卡*/}
      <TabBarIOS
          barTintColor='black'
          translucent = {true}
          tintColor = 'white'
        //  style={{width:375}}
      >

      {/*第1塊*/}
      <TabBarIOS.Item
          systemIcon="contacts"
          badge="3"
          selected={this.state.selectedTabBarItem == 'first'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'first'
            })
          }}
          >
          <View style={styles.commonViewSytle}>
              <Text style={styles.contentStyle}>第一塊</Text>
          </View>
      </TabBarIOS.Item>

      {/*第2塊*/}
      <TabBarIOS.Item
          systemIcon="bookmarks"
          selected={this.state.selectedTabBarItem == 'second'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'second'
            })
          }}
        >
        <View style={[styles.commonViewSytle,{backgroundColor: '#FFCD5E'}]}>
              <Text style={styles.contentStyle}>第二塊</Text>
        </View>
      </TabBarIOS.Item>

      {/*第3塊*/}
      <TabBarIOS.Item
          systemIcon="downloads"
          selected={this.state.selectedTabBarItem == 'third'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'third'
            })
          }}
        >
        <View style={[styles.commonViewSytle,{backgroundColor:'#E54341'}]}>
              <Text style={styles.contentStyle}>第三塊</Text>
        </View>
      </TabBarIOS.Item>

      {/*第4塊*/}
      <TabBarIOS.Item
          systemIcon="search"
          selected={this.state.selectedTabBarItem == 'fourth'}
          onPress={()=>{
            this.setState({
              selectedTabBarItem: 'fourth'
            })
          }}
        >
        <View style={[styles.commonViewSytle,{backgroundColor:'#488DEE'}]}>
              <Text style={styles.contentStyle}>第四塊</Text>
        </View>
      </TabBarIOS.Item>

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

  //設置風格樣式
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#F5FCFF',
    },

    headerStyle: {
      flexDirection: 'row',
      height: 64,
      backgroundColor: '#ECECEC',
      alignItems: 'center',
      justifyContent: 'center'
    },

    contentStyle: {
      fontSize: 25,
      color: 'white'
    },

    navTextStyle: {
      marginTop: 10,
      color: 'black',
      fontSize: 17
    //  fontWeight: 'bold'
    },

    commonViewSytle: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor:'green'
    }
  });

  AppRegistry.registerComponent('HelloWorld', () => ViewController);