TarBar 可使用跨平臺(tái)的 scrollable-tab-view

tabbar.png

默認(rèn)的 DefaultTabBar 跟我們的樣式不大一樣，所以需要自定義 TabBar
參考網(wǎng)上代碼修改了一下

自定義 TabBar

/* @flow */
import React, { Component } from 'react';
import {
  View,
  Text,
  StyleSheet,
  TouchableOpacity,
  Image
} from 'react-native';

export default class CustomerBar extends Component {
  static propTypes = {
    goToPage: React.PropTypes.func, // 跳轉(zhuǎn)到對(duì)應(yīng)tab的方法
    activeTab: React.PropTypes.number, // 當(dāng)前被選中的tab下標(biāo)
    tabs: React.PropTypes.array, // 所有tabs集合
    tabNames: React.PropTypes.array, // 保存Tab名稱
    tabIcons: React.PropTypes.array, // 默認(rèn)圖標(biāo)
    tabSelectedIcons: React.PropTypes.array, // 選中圖標(biāo),
  }

  render() {
    return (
      <View>
        <View style={{height:1, backgroundColor:'grey'}}></View> // tabbar 頂部加一條橫線
        <View style={styles.tabs}>
            {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        </View>
      </View>
    );
  }

  renderTabOption(tab, i) {
    const color = this.props.activeTab == i? "green" : "black"; // 判斷i是否是當(dāng)前選中的tab，設(shè)置不同的顏色
    const icon = this.props.activeTab == i ? this.props.tabSelectedIcons[i] : this.props.tabIcons[i];

    return (
        <TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab} key={i}>
            <View style={styles.tabItem}>
                <Image
                    source={icon}  // 圖標(biāo)
                    style={{height:25}}
                    />
                <Text style={{color: color,marginTop:3, fontSize:12}}>
                    {this.props.tabNames[i]}
                </Text>
            </View>
        </TouchableOpacity>
     );
  }
}

const styles = StyleSheet.create({
    tabs: {
        flexDirection: 'row',
    },

    tab: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    },

    tabItem: {
        alignItems: 'center',
    paddingTop:3,
    paddingBottom:3
    },
});

// @flow
import React, {
    Component
} from 'react';
import {
    AppRegistry,
    Text,
    StyleSheet,
    Platform
} from 'react-native';

var ScrollableTabView = require('react-native-scrollable-tab-view');
import CustomerBar from './components/CustomerBar'

var App = React.createClass({
  tabNames: ['互助','憑證','公示','我的'],
  tabIcons:[require('./images/home.png'),require('./images/cert.png'),require('./images/notice.png'),require('./images/profile.png')],
  tabSelectedIcons:[require('./images/home_sel.png'),require('./images/cert_sel.png'),require('./images/notice_sel.png'),require('./images/profile_sel.png')],

  render() {
    return (
      <ScrollableTabView
        tabBarPosition='bottom' // tab 底部顯示
        locked = {true} // 禁止左右滑動(dòng)
        scrollWithoutAnimation = {true} // 切換頁(yè)面時(shí)不顯示動(dòng)畫
        renderTabBar={
          () => <CustomerBar
                  tabNames={this.tabNames}
                  tabIcons = {this.tabIcons}
                  tabSelectedIcons={this.tabSelectedIcons}
         />}>
        <Text style={styles.content}>#Page1</Text>
        <Text style={styles.content}>#Page2</Text>
        <Text style={styles.content}>#Page3</Text>
        <Text style={styles.content}>#Page4</Text>
      </ScrollableTabView>
    );
  }
});

const styles = StyleSheet.create({
  content: {
    marginTop: (Platform.OS === 'ios')? 20 : 0 // IOS 頂部加 20
  }
});

AppRegistry.registerComponent('HelloReact',() => App);

Demo