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