react-native-tab

react-native-tab is a simple module for add a "Tab Menu" to your React Native app.

Features

Usage

npm install react-native-tab

Demo1:

var React = require('react-native');
var MenuList = require('react-native-tab');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
 } = React;
  
var data = {
  "Language": {
    "All": ["All"],
    "Web Front End": [
      "HTML",
      "CSS",
      "JavaScript"
    ],
    "Server": [
      "Node.js",
      "PHP",
      "Python",
      "Ruby"
    ]
  },
  "Tool":{
    "All": ["All"],
    "Apple": ["Xcode"],
    "Other": ["Sublime Text", "WebStrom",]
  }
};


var App = React.createClass({
  render: function(){
    return (
      <View style={{marginTop:25}}>
        <MenuList data={data} nSelected={1} tabSelected={0} click={this.onPress}/>
      </View>
    );
  },
  onPress: function(val){
    alert(val);
  }
});


AppRegistry.registerComponent('app', () => App);

Demo2:

var React = require('react-native');
var MenuList = require('react-native-tab');
var {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    ScrollView,
    TouchableOpacity,
 } = React;

var data = {
  "全部区域": {
    "全部区域": ["全部区域"],
    "热门商圈": [
      "虹桥地区",
      "徐家汇地区",
      "淮海路商业区",
      "静安寺地区",
      "上海火车站地区",
      "浦东陆家嘴金融贸易区",
      "四川北路商业区",
      "人民广场地区",
      "南翔、安亭汽车城"
    ],
    "热门行政区": [
      "静安区",
      "徐汇区",
      "长宁区",
      "黄埔区",
      "虹口区",
      "宝山区",
      "闸北区"
    ]
  },
  "地铁沿线":{
    "地铁全线": ["地铁全线"],
    "一号线": ["莘庄站", "外环路站", "莲花路站", "锦江乐园站", "上海南站站", "漕宝路站"],
    "二号线": ["浦东国际机场站", "海天三路站", "远东大道站", "凌空路站"]
  }
};


var App = React.createClass({
  render: function(){
    return (
      <View style={{marginTop:25}}>
        <MenuList data={data} nSelected={1} tabSelected={0} click={this.onPress}/>
      </View>
    );
  },
  onPress: function(val){
    alert(val);
  }
});


AppRegistry.registerComponent('app', () => App);

Properties

• data: 你需要渲染的数据，格式参见demo。
• tabSelected: 默认选中第几个tab，number类型。
• nSelected: 默认选中tab下的二级菜单项，number类型。