react-native 二级菜单制作

/**
* Sample React Native App
* https://github.com/facebook/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 (
//<View key={i}><Text>{item}</Text></View> caret-down
<View key={i}>
<TouchableOpacity
activeOpacity={0.75}
onPress={this.onPressItem.bind(this,i) }
>
<View style={styles.itemContainer} >
<Icon color="gray" size={30} name={this.state.listExpand[i]?'caret-down':'caret-right'} />
<Text>{item}</Text>
</View>
</TouchableOpacity>
{this.state.listExpand[i]?this.renderSubMenuList(list2):null}
</View>

);
}
renderSubMenuList(list2) {
return list2.map((item,i) => this.renderSubItem(item,i));
}
renderSubItem(item,i) {
return (
//<View key={i}><Text>{item}</Text></View>
<View style={styles.itemContainer} key={i}>
<Text>{item}</Text>
<Icon color="gray" size={30} name='angle-right' />
</View>
);
}

render() {
//解构获取上一层的属性Home,rowDate，来自于HomeContainer
//const { Home,rowDate } = this.props;
// tag = rowDate;
// console.log(this.props);
// debugger
//let homeList = Home.HomeList;

return (
<View>
<HeaderView
titleView={titleName}
leftIcon={tag ? 'angle-left' : null}
/>
<ScrollView contentContainerStyle={styles.contentContainer}>
{this.renderMenuList(list)}
</ScrollView>
</View>
);
}

}

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;