react-native-scrollable-tab-view 标签导航，可以点击切换，每个 tab 可以有自己的 ScrollView，点击切换的时候可以维护自己的滚动方向。
（以上摘取自网络）
下面记录下自己的使用
地址：https://github.com/skv-headless/react-native-scrollable-tab-view
使用：
npm install react-native-scrollable-tab-view --save
render() {
return (
<ScrollableTabView style={{marginTop:20}}
renderTabBar={() => <DefaultTabBar tabNames={this.state.tabNames}/>}//忽略这一行，为默认的样式
tabBarPosition='overlayBottom'//top、bottom、overlayTop、overlayBottom顶部底部悬浮
onChangeTab= {(obj)=>{console.log('选中了：'+obj.i)}}//切换后调用此方法
onScroll={(postion)=>{console.log('postion:'+postion)}}//正在滚动调用 0到length-1
locked={false}//手指是否能拖动视图，默认为false（表示可以拖动）
initialPage={0}//初始化时被选中的Tab下标，默认是0（即第一页）
tabBarBackgroundColor="red"//背景色
tabBarActiveTextColor="blue"//选中的tab的文字颜色
tabBarInactiveTextColor="yellow"//没有选中的tab的文字颜色
tabBarTextStyle={{fontSize:17}}//tab的字体的style
scrollWithoutAnimation={false}//设置“点击”Tab时，视图切换是否有动画，默认为false（即：有动画效果）
>
{/*{每个被包含的子视图必须使用tabLabel属性，表示对应Tab显示的文字}*/}
{/*{每个被包含的子视图必须使用tabLabel属性，表示对应Tab显示的文字}*/}
{/*{每个被包含的子视图必须使用tabLabel属性，表示对应Tab显示的文字}*/}
<View tabLabel='Tab1' style={styles.container}>
<Text>1</Text>
</View>
<View tabLabel='Tab2' style={styles.container}>
<Text>2</Text>
</View>
<View tabLabel='Tab3' style={styles.container}>
<Text>3</Text>
</View>
<View tabLabel='Tab4' style={styles.container}>
<Text>4</Text>
</View>
<View tabLabel='Tab5' style={styles.container}>
<Text>5</Text>
</View>
<View tabLabel='Tab6' style={styles.container}>
<Text>6</Text>
</View>
</ScrollableTabView>
);
默认样式如图
当然也可以自定义tabbar
renderTabBar 这个属性是一个方法，传如Component即可
自定义的Component代码如下：
'use strict';
import React, {Component} from 'react';
import {
StyleSheet,
View,
TouchableOpacity,
Text
} from 'react-native';
class DefaultTabBar extends Component {
propTypes = {
goToPage: React.PropTypes.func, // 跳转到对应tab的方法
activeTab: React.PropTypes.number, // 当前被选中的tab下标
tabs: React.PropTypes.array, // 所有tabs集合,暂未发现有何作用，暂未用到
tabNames: React.PropTypes.array, // 保存Tab名称，由上一级传入数组
};
setAnimationValue({value}) {
console.log('setAnimationValue'+value);
}
componentDidMount() {
// Animated.Value监听范围 [0, tab数量-1]
this.props.scrollValue.addListener(this.setAnimationValue);
}
//创建tabbar
renderTabOption(tab, i) {
let color = this.props.activeTab == i ? "red" : "black"; // 判断i是否是当前选中的tab，设置不同的颜色
return (
<TouchableOpacity onPress={()=>this.props.goToPage(i)} style={styles.tab}>
<View style={styles.tabItem}>//更复杂的tabbr在此处编码，这里简单的显示了tabbar的名字而已
<Text style={{color: color}}>
{this.props.tabNames[I]}
</Text>
</View>
</TouchableOpacity>
);
}
render() {
//接收由上一级传过来的数组，然后遍历数组添加tabbar
console.log('tabNames'+this.props.tabNames);
return (
<View style={styles.tabs}>
{this.props.tabNames.map((tab, i) => this.renderTabOption(tab, i))}
</View>
);
}
}
const styles = StyleSheet.create({
tabs: {
flexDirection: 'row',
height: 50,
},
tab: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
tabItem: {
flexDirection: 'column',
alignItems: 'center',
},
});
export default DefaultTabBar;
使用方法前面的代码里面已经有了
<ScrollableTabView style={{marginTop:20}}
renderTabBar={() => <DefaultTabBar tabNames={this.state.tabNames}/>}//自定义tabbar样式
...
>
效果如图：
demo:https://github.com/chjwrr/ThirdPartyToolTest
DDBDBB7C-A4EA-4D92-9D72-A3FCB039FF2E.png
