react-native-scrollable-tab-view

TarBar 可使用跨平台的 scrollable-tab-view

默认的 DefaultTabBar 跟我们的样式不大一样，所以需要自定义 TabBar
参考网上代码修改了一下

自定义 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, // 跳转到对应tab的方法
    activeTab: React.PropTypes.number, // 当前被选中的tab下标
    tabs: React.PropTypes.array, // 所有tabs集合
    tabNames: React.PropTypes.array, // 保存Tab名称
    tabIcons: React.PropTypes.array, // 默认图标
    tabSelectedIcons: React.PropTypes.array, // 选中图标,
  }

  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是否是当前选中的tab，设置不同的颜色
    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}  // 图标
                    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} // 禁止左右滑动
        scrollWithoutAnimation = {true} // 切换页面时不显示动画
        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