react-native-scrollable-tab-view demo

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

tabbar.png

默认的 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 (
      
         // tabbar 顶部加一条横线
        
            {this.props.tabs.map((tab, i) => this.renderTabOption(tab, i))}
        
      
    );
  }

  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 (
        this.props.goToPage(i)} style={styles.tab} key={i}>
            
                
                
                    {this.props.tabNames[i]}
                
            
        
     );
  }
}

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 (
       }>
        #Page1
        #Page2
        #Page3
        #Page4
      
    );
  }
});

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

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

Demo