使用介紹

scrollable-tab-view 是RN的第三方組件,使用的時(shí)候我們需要做的是用npm導(dǎo)入到項(xiàng)目的組件管理文件夾下
組件下載地址:
https://github.com/skv-headless/react-native-scrollable-tab-view
安裝方法:

1:終端窗口"cd 項(xiàng)目工程目錄里"
執(zhí)行命令:npm install react-native-scrollable-tab-view --save
 
2:安裝成功后在工程文件里引入:
[ES5語法如下,RN最新的版本已經(jīng)不可以使用]
 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

具體實(shí)例代碼:

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='行業(yè)工資排行'>
        <Text style={styles.phoneContainer}>
          行業(yè)工資排行
        </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='職業(yè)工資排行'>
        <Text style={styles.phoneContainer}>
          職業(yè)工資排行
        </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