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 (
      //{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',
    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(
                                    key={'leftIcon'}
                    activeOpacity={0.75}
                    style={styles.leftIcon}
                    onPress={this.props.leftIconAction}
                    >
                   
               
            )
        }


        // 标题,没有用！？
        // if (this.props.title != undefined) {
        //     NavigationBar.push(
        //         {this.props.title}
        //     )
        // }


        // 自定义标题View
        if (this.props.titleView != undefined) {
            // let Component = this.props.titleView;


            NavigationBar.push(
               
                    {this.props.titleView}
               
            )
        }




        return (
           
                {NavigationBar}
           
        )
    }
}


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