React Native带你实现scrollable-tab-view（一）

前言：项目中很多地方用到了react-native-scrollable-tab-view这个第三方框架，觉得有必要拿出来研究一下，因为其中也遇到了很多bug，哈哈！都是些小bug，这框架写的还是很牛逼的，所以就开启我们的scrollable-tab-view之旅吧。

先看一下react-native-scrollable-tab-view的效果图：



小伙伴貌似都比较熟悉此框架，主体分为两个部分：

一个是头部模块、另外一个是内容模块。

先说一下原理：

1、设置横向scrollview的pagingEnabled属性为true，使之有页面切换的效果。

2、监听横向scrollview的滑动，然后改变tabview的状态。

原理是不是soeasy呢？哈哈～ 只能说看起来很简单。

我们创建一个项目叫ScrollTabDemo，然后创建一个文件夹叫scrollabletab,然后组件里面摆放一个横向的scrollview，scrollview的pageeabled属性设置为true，然后放三个view：

/**
* @author YASIN
* @version [React-Native Pactera V01, 2017/9/5]
* @date 2017/9/5
* @description index
*/
import React, {
Component
} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
Dimensions,
} from 'react-native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
export default class ScrollableTab extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}

render() {
return (
<ScrollView
style={styles.container}
pagingEnabled={true}
horizontal={true}
>
{['页面一', '页面二', '页面三'].map((item, index)=> {
return (
<Text
key={item+index}
style={{
width:screenW,
flex:1,
}}
>
{item}
</Text>
);
})}
</ScrollView>
);
}
}
const styles = StyleSheet.create({
container: {
width: screenW,
flex: 1,
marginTop: 22,
}
});

然后就可以玩起来了：



好吧～ 这样就完了吗？哈哈～革命还刚刚开始。

然后我们再把tabview加上：

/**
* @author YASIN
* @version [React-Native Pactera V01, 2017/9/5]
* @date 2017/9/5
* @description index
*/
import React, {
Component
} from 'react';
import {
View,
Text,
StyleSheet,
ScrollView,
Dimensions,
TouchableOpacity,
} from 'react-native';
const screenW = Dimensions.get('window').width;
const screenH = Dimensions.get('window').height;
export default class ScrollableTab extends Component {
// 构造
constructor(props) {
super(props);
// 初始状态
this.state = {};
}

render() {
return (
<View
style={styles.container}
>
{/*渲染tabview*/}
{this._renderTabView()}
<ScrollView
style={styles.scrollStyle}
pagingEnabled={true}
horizontal={true}
>
{['页面一', '页面二', '页面三'].map((item, index)=> {
return (
<Text
key={item + index}
style={{
width: screenW,
flex: 1,
}}
>
{item}
</Text>
);
})}
</ScrollView>
</View>
);
}

/**
* 渲染tabview
* @private
*/
_renderTabView() {
return (
<View
style={styles.tabContainer}
>
{['页面一', '页面二', '页面三'].map((item, index)=> {
return (
<TouchableOpacity
key={item + index}
style={styles.tabStyle}
>
<Text>{item}</Text>
</TouchableOpacity>
);
})}
</View>
);
}
}
const styles = StyleSheet.create({
container: {
width: screenW,
flex: 1,
marginTop: 22,
},
scrollStyle: {
flex: 1,
},
tabContainer: {
width: screenW,
flexDirection: 'row',
alignItems: 'center',
height: 50,
},
tabStyle: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
}
});

最后出来的效果是这样的：



嗯嗯，看着有那么点意思了，我们接下来要做的就是监听scrollview 的滚动，看它滑动到第几页了，然后选中我们的tabview，小伙伴可以先自己练练手哈～～ 欢迎入群，欢迎交流，大牛勿喷，下一节见！