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',     alignItems: 'center',     backgroundColor: 'white',     borderBottomColor: '#ccc',     borderBottomWidth: 0.5,

  }, });

module.exports = Admin;

---------------------------

headerView.js

/**  * Created by ljunb on 16/5/8.  * 导航栏标题  */ import React from 'react'; import {     StyleSheet,     View,     Text,     Image,     TouchableOpacity, } from 'react-native'; import Icon from 'react-native-vector-icons/FontAwesome'; import Common from '../common/common'; export default class Header extends React.Component {     render() {         let NavigationBar = [];         // 左边图片按钮         if (this.props.leftIcon != undefined) {             NavigationBar.push(                 <TouchableOpacity                     key={'leftIcon'}                     activeOpacity={0.75}                     style={styles.leftIcon}                     onPress={this.props.leftIconAction}                     >                     <Icon color="white" size={30} name={this.props.leftIcon} />                 </TouchableOpacity>             )         }         // 标题,没有用！？         // if (this.props.title != undefined) {         //     NavigationBar.push(         //         <Text key={'title'} style={styles.title}>{this.props.title}</Text>         //     )         // }         // 自定义标题View         if (this.props.titleView != undefined) {             // let Component = this.props.titleView;             NavigationBar.push(                 <View key={'titleView'} style={styles.titleViewContainer}>                     <Text style={styles.titleView}>{this.props.titleView}</Text>                 </View>             )         }         return (             <View style={styles.navigationBarContainer}>                 {NavigationBar}             </View>         )     } } const styles = StyleSheet.create({     navigationBarContainer: {         width: Common.window.width,         marginTop: 0,         flexDirection: 'row',         height: 44,         // justifyContent: 'center',         // alignItems: 'center',         backgroundColor: '#2e8b57',         borderBottomColor: '#ccc',         borderBottomWidth: 0.5,         // backgroundColor: 'white'     },     title: {         fontSize: 15,         marginLeft: 15,     },     titleViewContainer: {         flex: 1,         justifyContent: 'center',         alignItems: 'center',     },     titleView: {         fontSize: 15,         color: 'white'     },     leftIcon: {         width: 40,         justifyContent: 'center',         alignItems: 'center',     }, })