/** * 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; (编辑:李大同)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|