基于 react-native-scrollable-tab-view 自定义的 segment

本 segment 是根据 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  onPressHandler(page)}
        >
            
                
                    {name}
                
            
        ;
    },

    render() {
        return (
            
                 {}} >
                    
                
                
                    {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);
                    })}
                
                 {}} >
                    
                
            
        );
    },
});

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 
    {props.children}
  ;
};

module.exports = Button;

然后在 ScrollableTabView 里面使用它

 }> 
          
          

xi
～～～～～～～～