RN笔记-react-native-scrollable-tab-view

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.jianshu.com/p/1782137a7a8a