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',
    },
})