native react 二级菜单_react-native 二级菜单制作

import React,{

Component

} from 'react';

import {

StyleSheet,

Text,

ScrollView,

Image,

ListView,

TouchableOpacity,

View,

InteractionManager,

RefreshControl,

Navigator,

} from 'react-native';

import {

// Admin,

} from '../actions/adminAction';

import Common from '../common/common';

import Loading from '../common/loading';

import LoadMoreFooter from '../common/loadMoreFooter';

import HeaderView from '../common/headerView';

import BaseComponent from '../common/baseComponent';

import Icon from 'react-native-vector-icons/FontAwesome';

let titleName = '管理';

let list = ['一级菜单一','一级菜单二','一级菜单三'];

let tag = "";

let list2 = ['submenu1','submenu2','submenu3'];

class Admin extends BaseComponent {

constructor(props) {

super(props); //这一句不能省略，照抄即可

// debugger

this.state = {

listExpand:[false,false,false],//true表示有数据更新

};

}

renderMenuList(list) {

return list.map((item,i) => this.renderItem(item,i));

}

onPressItem(i){

let l=this.state.listExpand;

l[i]=!l[i];

this.setState({listExpand:l});

}

renderItem(item,i) {

return (

//{item} caret-down

activeOpacity={0.75}

onPress={this.onPressItem.bind(this,i) }

>

{item}

{this.state.listExpand[i]?this.renderSubMenuList(list2):null}

);

}

renderSubMenuList(list2) {

return list2.map((item,i) => this.renderSubItem(item,i));

}

renderSubItem(item,i) {

return (

//{item}

{item}

);

}

render() {

//解构获取上一层的属性Home,rowDate，来自于HomeContainer

//const { Home,rowDate } = this.props;

// tag = rowDate;

// console.log(this.props);

// debugger

//let homeList = Home.HomeList;

return (

titleView={titleName}

leftIcon={tag ? 'angle-left' : null}

/>

{this.renderMenuList(list)}

);

}

}

const styles = StyleSheet.create({

contentContainer: {

paddingBottom: 20,

},

center: {

flexDirection: 'row',

justifyContent: 'center',

alignItems: 'center',

itemContainer: {

width: Common.window.width - 20,

height: 50,

paddingLeft: 10,

paddingRight: 10,

flexDirection: 'row',

justifyContent: 'space-between',

backgroundColor: 'white',

borderBottomColor: '#ccc',

borderBottomWidth: 0.5,

},

});

module.exports = Admin;