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

    },

})