本 segment 是根據(jù) DefaultTabBar 改寫而成 ， 由于動畫效果會遮擋里面的文字壶冒，所以把 動畫去掉了螃成。

效果圖

以下是 SegmentTabBar.js

const React = require('react');
const { ViewPropTypes } = ReactNative = require('react-native');
const {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Dimensions,
} = ReactNative;
const Button = require('./Button');
const PhoneWidth = Dimensions.get('window').width;
import Icon from 'react-native-vector-icons/FontAwesome';

const SegmentTabBar = React.createClass({
    propTypes: {
        goToPage: React.PropTypes.func,
        activeTab: React.PropTypes.number,
        tabs: React.PropTypes.array,
        backgroundColor: React.PropTypes.string,
        activeTextColor: React.PropTypes.string,
        inactiveTextColor: React.PropTypes.string,
        textStyle: Text.propTypes.style,
        tabStyle: ViewPropTypes.style,
        renderTab: React.PropTypes.func,
        underlineStyle: ViewPropTypes.style,
    },

    getDefaultProps() {
        return {
            activeTextColor: 'navy',
            inactiveTextColor: 'black',
            backgroundColor: null,
        };
    },

    renderTabOption(name, page) {
    },

    renderTab(name, page, isTabActive, onPressHandler) {
        const { activeTextColor, inactiveTextColor, textStyle, } = this.props;
        const textColor = isTabActive ? activeTextColor : inactiveTextColor;
        const backgroundColor = isTabActive ? '#0086E5' : '#FFF';
        const fontWeight = isTabActive ? 'bold' : 'normal';
        console.log(textColor)
        return <Button
            style={{flex: 1,height:25,backgroundColor,borderRadius:1}}
            key={name}
            accessible={true}
            accessibilityLabel={name}
            accessibilityTraits='button'
            onPress={() => onPressHandler(page)}
        >
            <View style={[styles.tab, this.props.tabStyle]}>
                <Text style={[{color: textColor, fontWeight}, textStyle, ]}>
                    {name}
                </Text>
            </View>
        </Button>;
    },

    render() {
        return (
            <View style={styles.tabBarBox}>
                <TouchableOpacity style={styles.iconBox} onPress={() => {}} >
                    <Icon name="bell-o" size={20} color="#333" />
                </TouchableOpacity>
                <View style={[styles.tabs, {backgroundColor: this.props.backgroundColor, }, this.props.style, ]}>
                    {this.props.tabs.map((name, page) => {
                        const isTabActive = this.props.activeTab === page;
                        const renderTab = this.props.renderTab || this.renderTab;
                        return renderTab(name, page, isTabActive, this.props.goToPage);
                    })}
                </View>
                <TouchableOpacity style={styles.iconBox} onPress={() => {}} >
                    <Icon name="search" size={20} color="#333"/>
                </TouchableOpacity>
            </View>
        );
    },
});

const styles = StyleSheet.create({
    tabBarBox:{
        height: 50,
        flexDirection:'row',
        alignItems:'center',
        justifyContent:'space-between'
    },
    iconBox:{
        margin:15
    },
    tab: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'center',
    },
    tabs: {
        borderRadius:2,
        borderColor: '#0086E5',
        borderWidth:1,
        width:PhoneWidth/3,
        flexDirection: 'row',
        alignItems:'center',
        alignContent:'center',
        justifyContent: 'space-around',
    },
});

module.exports = SegmentTabBar;

這里的Button.js

const React = require('react');
const ReactNative = require('react-native');
const {
 TouchableOpacity,
} = ReactNative;

const Button = (props) => {
  return <TouchableOpacity {...props} activeOpacity={0.95}>
    {props.children}
  </TouchableOpacity>;
};

module.exports = Button;

然后在 ScrollableTabView 里面使用它

<ScrollableTabView
          style={styles.container}
          tabBarPosition='top'
          tabBarBackgroundColor='#FFFFFF'
          tabBarActiveTextColor='#fff'
          tabBarInactiveTextColor='#333'
          tabBarTextStyle={{fontSize: 13}}
          renderTabBar={() => <SegmentTabBar navigate />}> 
          <TopicList tabLabel='發(fā)現(xiàn)' {...this.props}/>
          <MyCircle tabLabel='我的圈子' {...this.props}/>
</ScrollableTabView>

xi
～～～～～～～～