基于 react-native-scrollable-tab-v

本 segment 是根据 DefaultTabBar 改写而成 ， 由于动画效果会遮挡里面的文字，所以把 动画去掉了。

以下是 SegmentTabBar.js
<pre>
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';

</br>
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,
},
</br>
getDefaultProps() {
return {
activeTextColor: 'navy',
inactiveTextColor: 'black',
backgroundColor: null,
};
},
</br>
renderTabOption(name, page) {
},
</br>
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>;
},
</br>
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>
);
},
});
</br>
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',
},
});
</br>
module.exports = SegmentTabBar;
</pre>
这里的Button.js
<pre>
const React = require('react');
const ReactNative = require('react-native');
const {
TouchableOpacity,
} = ReactNative;
</br>
const Button = (props) => {
return <TouchableOpacity {...props} activeOpacity={0.95}>
{props.children}
</TouchableOpacity>;
};
</br>
module.exports = Button;
</pre>
然后在 ScrollableTabView 里面使用它
<pre>
<ScrollableTabView
style={styles.container}
tabBarPosition='top'
tabBarBackgroundColor='#FFFFFF'
tabBarActiveTextColor='#fff'
tabBarInactiveTextColor='#333'
tabBarTextStyle={{fontSize: 13}}
renderTabBar={() => <SegmentTabBar navigate />}>
<TopicList tabLabel='发现' {...this.props}/>
<MyCircle tabLabel='我的圈子' {...this.props}/>
</ScrollableTabView>
</pre>
xi
～～～～～～～～