使用介绍

scrollable-tab-view 是RN的第三方组件,使用的时候我们需要做的是用npm导入到项目的组件管理文件夹下
组件下载地址:
https://github.com/skv-headless/react-native-scrollable-tab-view
安装方法:

1:终端窗口"cd 项目工程目录里"
执行命令:npm install react-native-scrollable-tab-view --save
 
2:安装成功后在工程文件里引入:
[ES5语法如下,RN最新的版本已经不可以使用]
 var ScrollableTabView = require('react-native-scrollable-tab-view');
[ES6语法如下]
import 组件类命名,{类型,}from '第三方组件名'
import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';

组件查看:

ls-scrollable-tab-view.png

具体实例代码:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
   ProgressViewIOS
} from 'react-native';


import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';
class TabBarView extends Component {
  render() {
    return (
    <ScrollableTabView tabBarUnderlineColor="rgb(23,102,171)" tabBarActiveTextColor="black"  style={{marginTop:20}}>
      <View tabLabel='城市工资排行'>
        <Text style={styles.phoneContainer}>
          城市工资排行
        </Text>
        <ProgressViewIOS style={styles.progressView}  progress={0.3}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={0.2}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={0.4}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={0.6}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={0.8}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="black" progress={0.9}/>
      </View>

      <View tabLabel='行业工资排行'>
        <Text style={styles.phoneContainer}>
          行业工资排行
        </Text>
        <ProgressViewIOS style={styles.progressView}  progress={0.3}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={0.2}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={0.4}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={0.6}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={0.8}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="black" progress={0.9}/>
    </View>

      <View tabLabel='职业工资排行'>
        <Text style={styles.phoneContainer}>
          职业工资排行
        </Text>
        <ProgressViewIOS style={styles.progressView}  progress={0.3}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="purple" progress={0.2}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="red" progress={0.4}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="orange" progress={0.6}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="yellow" progress={0.8}/>
        <ProgressViewIOS style={styles.progressView} progressTintColor="black" progress={0.9}/>
      </View>

    </ScrollableTabView>

    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
  progressView: {
    marginTop: 20,
    marginLeft:10,
    marginRight:10,

  },
  phoneContainer :{
    borderColor:"rgb(241,241,241)",
    backgroundColor:"rgb(255,255,255)",
    flex:1,
    borderStyle:"solid",
    borderWidth:1,
    margin:10,
    borderRadius:3,
    shadowColor: "rgb(229,229,229)",
    shadowOpacity: 0.5,
    shadowRadius: 2,
    shadowOffset: {
      height: 3,
      width: 3
    }
  }
});

AppRegistry.registerComponent('TabBarView', () => TabBarView);

效果图:

scrollable-tab-view.gif

Demo源码下载: http://pan.baidu.com/s/1o762aQe 密码: 87k6