React Native实现类似原生Android中ViewPage+TabLayout

实现思路：Tab部分采用ScrollableTabView+ScrollableTabBar，切换的页面可以封装成一个可以复用的。

效果图：

代码如下：
首先安装第三方库

npm install react-native-scrollable-tab-view --save

ScrollableTabView部分代码：

<ScrollableTabViewstyle={styles.scrollTab}initialPage={0}renderTabBar={() =><ScrollableTabBarstyle={
   {paddingHorizontal:10, height: 40,backgroundColor:'#fff',alignItems:'center',justifyContent:'center'}}tabStyle={
   {width: 100, height: 40, paddingHorizontal:5,}}backgroundColor={'#FFFDD5'}textStyle={
   {fontSize: 14}}activeTextColor={'#000'}inactiveTextColor={'#333333'}underlineStyle={styles.underlineStyle}/>}>/******         renderFragment是复用的页面   tempTabData为Tab标题数组 根据数据灵活增加       ******/{tempTabData.map(this.renderFragment)}
</ScrollableTabView>

renderFragment代码：

renderFragment = (item, i) => {return(<PopularTab      /**这里是要复用的页面 我的名字是PopularTab*/tabLabel={item}  /** Tab对应的标题的名字*//>)};

上面代码用到的样式：

const styles = StyleSheet.create({//Tab样式scrollTab: {flex: 1,backgroundColor: '#fff',},//Tab下划线样式underlineStyle:{height:2,justifyContent:'center',alignItems: 'center',backgroundColor:'#fcb602',}
});