scrollable-tab-view 是RN的第三方組件,使用的時候我們需要做的是用npm導入到項目的組件管理文件夾下。

安裝方法

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';

代碼實現

import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view';

var Consult = React.createClass({
  render() {
    return (
      <View style={styles.container}>
        { /*首頁導航條*/ }
        {this.renderNavBar()}
        <ScrollableTabView style={{backgroundColor:'white'}} tabBarUnderlineStyle={{backgroundColor: '#1fb5ec',width:width/4-40,height:2,margin:20}} tabBarActiveTextColor="#1fb5ec"
          renderTabBar={() => <DefaultTabBar/>}>
          <ConsultList
            tabLabel='教育資訊'
            classid='439'
            popToHome={(mark)=>this.pushNative(mark)}
            htmlContent={(html)=>this.pushHtml(html)}
          />
          <ConsultList
            tabLabel='通知公告'
            classid='440'
            popToHome={(mark)=>this.pushNative(mark)}
            htmlContent={(html)=>this.pushHtml(html)}
          />
          <ConsultList
            tabLabel='安全教育'
            classid='442'
            popToHome={(mark)=>this.pushNative(mark)}
            htmlContent={(html)=>this.pushHtml(html)}
          />
          <ConsultList
            tabLabel='學校新聞'
            classid='450'
            popToHome={(mark)=>this.pushNative(mark)}
            htmlContent={(html)=>this.pushHtml(html)}
          />
        </ScrollableTabView>

      </View>
    );
  },
  pushHtml(html){
    //  alert(html);
     this.props.navigator.push(
       {
         component:HtmlDetail,//要跳轉的版塊
         passProps:{'html':html}
       }
     );
  },
  // 導航條
  renderNavBar(){
    return(
      <View style={styles.navOutViewStyle}>
        <TouchableOpacity onPress={()=>{this.popBack()}} style={styles.leftViewStyle}>
          <Image source={{uri:'common_back'}} style={styles.navImagStyle} />
        </TouchableOpacity>
        <Text style={{color:'white', fontSize:16, fontWeight:'bold', marginTop:18}}>教育資訊</Text>
      </View>
    )
  },
  popBack(){
    this.props.navigator.pop();
  },
});

var styles = StyleSheet.create({
  navOutViewStyle: {
    height: 64,
    backgroundColor: '#1fb5ec',
    // 設置主軸方向
    flexDirection: 'row',
    // 垂直居中，設置側軸的對其方式
    alignItems: 'center',
    // 設置主軸放心居中
    justifyContent: 'center'
  },
  leftViewStyle: {
    //絕對定位
    position: 'absolute',
    left: 10,
    bottom: 13
  },
  rightViewStyle: {
    //絕對定位
    position: 'absolute',
    right: 10,
    bottom: 13
  },
  navImagStyle: {
    width: 23,
    height: 23,
  },
  topInputStyle: { // 設置輸入框
    width: width * 0.71,
    height: 31,
    backgroundColor: 'white',
    marginTop: 20,
    //設置圓角
    borderRadius: 15,
    //設置內左邊距
    paddingLeft: 10,
    fontSize: 15
  },
  container: {
    flex: 1,
    // justifyContent: 'center', // 主軸對其方式要去掉
    // alignItems: 'center',
    backgroundColor: '#E8E8E8',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

module.exports = Consult;

效果圖

react-native-scrollable-tab-view.gif

補充：寫此文在于讓react-native開發者理清類似Tab分頁的代碼實現邏輯，< ConsultList />為自定義的分頁列表組件，代碼直接拷貝是運行不起來的。如果不了解react-native-scrollable-tab-view，分頁可以使用<View></View>組件代替，或者參考網址：http://www.lxweimin.com/p/1782137a7a8a