• Stars
    star
    180
  • Rank 213,097 (Top 5 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created about 9 years ago
  • Updated about 9 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

React Native 二级菜单组件

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类型。

More Repositories

1

react-native-lesson

React-Native入门指南
HTML
4,071
star
2

React-Native-App

RN 开源之初,写几个小 App 玩玩
JavaScript
741
star
3

React-Dou

豆瓣搜索App
JavaScript
410
star
4

React-Native-Code

《React Native入门与实战》实例源码
JavaScript
389
star
5

toilet

一款快速帮你找到附近卫生间的神奇App
JavaScript
383
star
6

weex-learning

weex 学习/实践指南
JavaScript
268
star
7

sharePPT

个人分享PPT(外部 & 公司内部)
JavaScript
163
star
8

OurTimes

DEMO FOR M(MongoDB) + N(Node.js) + A(Angular.js)
JavaScript
141
star
9

pm-insight

互联网产品观察。三年里阅读了大量的书籍和参加内训,经常在内网知识学习平台霸榜。也记了不少笔记在本本上,这里将纸质笔记数字化。尽管是片段知识,但是大多是记笔记那一刻的感受最深刻的,最为触动的。
125
star
10

search

基于豆瓣API的图书、电影、音乐搜索web App
JavaScript
114
star
11

node-weibo

新浪微博OAuth2接口(package Weibo API based on Node.js,尊重新浪微博API,使用方便高效 )
JavaScript
110
star
12

weex-yy

微阅读
JavaScript
108
star
13

CloudPhoto

打造个人私有.云相册;Serverless + 小程序 + 免费空间/流量/计算服务
JavaScript
95
star
14

react-native-calendar

React-Native-Calendar 日历组件
JavaScript
88
star
15

serverless-colleage

2600多所高校信息原始数据
70
star
16

closeEye

天黑,请闭眼(基于React Native的游戏)
JavaScript
53
star
17

keyboard

模拟数字键盘
JavaScript
43
star
18

rn-cook

React Native AsyncStorage Debug Tool
JavaScript
34
star
19

cloud-developer

目标就一个通俗易懂,不要高大上的概念,能上手才是王道
34
star
20

iOS-Dou

基于iOS开发的豆搜应用
Objective-C
30
star
21

weex-yy-h5

微阅读,不依赖playground,打包成H5版本
HTML
24
star
22

jsbundle

偷渡:简单React Native 更新系统
JavaScript
21
star
23

image-vector

将图片转化为矢量并canvas化的简单工具(基于Node.js + HTML5 canvas)
JavaScript
18
star
24

search_Hybird

将search应用(基于Angular & Open Api)内嵌进WebView测试性能
Objective-C
16
star
25

aissues

JavaScript
13
star
26

meitu

美丽旅途,大巴社交
JavaScript
12
star
27

cookie

A Util library of Cookie(操作cookie的工具类)
JavaScript
11
star
28

leaflet-cn

leaflet 中文翻译
10
star
29

vector-map

基于HTML5 Canvas的矢量地图渲染
JavaScript
9
star
30

codeFE

前端代码规范
8
star
31

React-LBS

基于React-Native开发LBS应用
JavaScript
7
star
32

guid

guid generator : used for node.js or javascript client
JavaScript
6
star
33

tailor2048

可配置的2048游戏
JavaScript
5
star
34

https-request

simple node https request library
JavaScript
4
star
35

component

JavaScript Component ( Simple Class Library)
JavaScript
2
star
36

DeviceManager

基于React-Native的设备管理系统
2
star
37

offlineApplictaion

HTML5离线应用
JavaScript
1
star
38

zuji

JavaScript
1
star
39

dockit

md doc -> static website
JavaScript
1
star
40

simple-wiki

基于markdown的简单绿色wiki系统(不依赖数据库,可定制)
JavaScript
1
star
41

Framework6

1
star
42

node-forum

1
star
43

node-webkit-develope

node-webkit开发:打造桌面web混合应用
1
star