react native动态tab组件
import React,{ Component } from 'react';
import {
StyleSheet,
View,
Text,
TouchableOpacity,
ScrollView,
Dimensions
} from 'react-native';
const dimen = Dimensions.get('window');
const deviceWidth = dimen.width;
function px(size) {
return Math.round(deviceWidth / 750 * size);
}
/**
* tab组件头部
* props data tab列表
* props style 样式
* props index 默认选中的序号
* props onChange 选中
*/
export default class TabBar extends Component {
static defaultProps = {
data: [],
index: -1,
onChange: () => { },
}
constructor(props) {
super(props);
this.state = {
index: props.index,
}
this.scroll = null;
this.laout_list = []
this.scrollW = 0;
}
render() {
return <View style={[tabBarStyle.tab, this.props.style]}>
<ScrollView ref={e => this.scroll = e}
horizontal directionalLockEnabled
showsHorizontalScrollIndicator={false}
snapToAlignment="center">
{this.props.data.map((item, index) =>
<TouchableOpacity onPress={() => this.setIndex(index)} onLayout={e => this.setLaout(e.nativeEvent.layout, index)} key={item.id} style={tabBarStyle.itemBtn}>
<Text style={[tabBarStyle.item, this.state.index === index ? tabBarStyle.active : null]} > {item.name}</Text>
<View style={[tabBarStyle.line, this.state.index === index ? tabBarStyle.active2 : null]}></View>
</TouchableOpacity>
)}
</ScrollView>
</View>
}
scroll = null;
laout_list = []
scrollW = 0;
shouldUpdate = true;
shouldComponentUpdate() {
if (!this.shouldUpdate) return false;
return !(this.shouldUpdate = false);
}
componentWillReceiveProps(pp) {
if (pp.index != this.props.index) {
this.setState({ index: pp.index })
setTimeout(() => {
this.setIndex(pp.index, false);
}, 200);
}
}
setLaout(layout, index) {
this.laout_list[index] = layout;
this.scrollW += layout.width;
}
setIndex(index, bl = true) {
this.setState({ index })
if (!this.scroll) return;
let layout = this.laout_list[index];
let rx = deviceWidth / 2;
let sx = layout.x - rx + layout.width / 2;
if (sx < 0) sx = 0;
sx < this.scrollW - deviceWidth && this.scroll.scrollTo({ x: sx, animated: bl });
sx >= this.scrollW - deviceWidth && this.scroll.scrollToEnd({ animated: bl });
this.props.onChange && this.props.onChange(index);
this.shouldUpdate = true;
}
}
const tabBarStyle = StyleSheet.create({
tab: {
backgroundColor: '#fbfafc',
flexDirection: 'row',
alignItems: "center",
justifyContent: "center",
borderBottomColor: '#efefef',
borderBottomWidth: px(1),
height: 40
},
itemBtn: {
paddingHorizontal: 12,
paddingTop: 2,
flexDirection: 'column',
justifyContent: "center",
alignItems: "center"
},
item: {
fontSize: px(28),
color: "#858385",
},
active: {
color: "#d0648f"
},
line: {
width: 20,
height: 2,
backgroundColor: "#fbfafc",
marginTop: 5,
marginBottom: 2,
},
active2: {
backgroundColor: "#d0648f"
},
sortimg: {
width: 55,
height: 40,
}
});
