native react 二级菜单_GitHub - wfxiang08/react-native-tab-menu: 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 (

);

},

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 (

);

},

onPress: function(val){

alert(val);

}

});

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

Properties

data: 你需要渲染的数据，格式参见demo。

tabSelected: 默认选中第几个tab，number类型。

nSelected: 默认选中tab下的二级菜单项，number类型。