左边导航右边内容 点击某条内容进入该页的详情页
实现效果
56813-rt1te.gif
结构
image.png
SettingMenu.js(定义左侧导航)
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Dimensions,
ScrollView,
Text,
TouchableOpacity,
Image,
View,
} from 'react-native';
const window = Dimensions.get('window');
export default class SettingMenu extends Component {
constructor(props) {
super(props);
this.state = {
itemSelected: '实时统计',
};
this._onClickItem = this._onClickItem.bind(this);
}
render() {
return (
<ScrollView style={styles.contantStyle}
showsVerticalScrollIndicator={false}>
{/*选项菜单*/}
{this._selectItem('实时统计',
[
{name:"场所实时在线率统计",id_name:"online_h"},
{name:"场所实时报警统计",id_name:"alarm_h"},
{name:"客户端实时安装在线率统计",id_name:"client_h"}
]
)}
{this._selectItem('单位管理',
[
{name:"上网服务营业场所",id_name:"netbar_index_h"},
{name:"上网服务在筹建场所",id_name:"construct_h"},
{name:"上网服务停、注、吊场所",id_name:"stop_h"},
{name:"已删除营业场所",id_name:"bardel_h"},
// {name:"上网服务擅停场所",id_name:"gstop_h"},
{name:"营业场所在线记录",id_name:"netbar_online_h"}
]
)}
{this._selectItem('行政管理',
[
{name:"营业场所营业审核",id_name:"netbar_flow_index_h"},
{name:"营业场所停业审核",id_name:"stoplist_h"},
{name:"营业场所处罚管理",id_name:"punish_h"}
]
)}
{this._selectItem('报警管理',
[
{name:"非法网站报警",id_name:"alarm_webs_h"},
{name:"非法游戏报警",id_name:"alarm_game_h"},
// {name:"非法网站访问提醒报警",id_name:"alarm_websites_h"},
{name:"场所超时营业报警",id_name:"alarm_overtime_h"},
{name:"防沉迷报警",id_name:"alarm_fcm_h"},
{name:"擅停报警",id_name:"alarm_stop_h"},
{name:"场所紧急状态报警",id_name:"alarm_emergency_h"},
{name:"未成年人上网报警",id_name:"alarm_wcn_h"},
]
)}
{this._selectItem('巡检管理',
[
{name:"巡检记录",id_name:"records_h"},
]
)}
</ScrollView>
);
}
_selectItem(item,child) {
return (
<TouchableOpacity style={[styles.itemTextView,this.state.itemSelected === item && styles.itemBtmStyle
]}
onPress={() => {
this._onClickItem(item,child)
}}>
<Text style={[
styles.itemDefaultColor,
this.state.itemSelected === item && styles.itemSelectedColor
]} >
{item}
</Text>
</TouchableOpacity>
)
}
_onClickItem(itemTextContant,child) {
this.setState({
itemSelected: itemTextContant,
});
//传递数据到右边显示组件
this.props.onItemSelected(itemTextContant,child);
}
};
const styles = StyleSheet.create({
contantStyle: {
paddingLeft:10,
paddingRight:10,
backgroundColor:"#f5f4f9",
},
itemTextView: {
height: 60,
width: 113,//window.width / 4,
backgroundColor:"#e8e6e6",//"#3375fd",
justifyContent: 'center',
alignItems:"center",
borderColor: '#ffffff',
fontSize:19,
borderWidth: 1,
borderRadius:10,
marginTop:16
},
item: {
fontSize: 16,
justifyContent: 'center',
alignItems: 'center',
flexDirection: 'row',
},
itemDefaultColor: {
color: '#010101',
fontSize:16
},
itemSelectedColor: {
color: '#ffffff'
},
itemBtmStyle:{
backgroundColor:"#3375fd",
}
});
BarInfor.js(整个页面)
import React, { Component } from 'react';
import {
Text,
StyleSheet,
View,
StatusBar,
TouchableOpacity,
ScrollView,
Image,
ActivityIndicator,
FlatList,
Animated,
TextInput,
RefreshControl,
Dimensions,
TouchableNativeFeedback,
NativeModules
} from 'react-native';
import { SvgBack, SvgBasicInforHome,SvgBarHome } from "../../../svg/svg"
import LeftMenu from './SettingMenu.js';//导入 菜单 组件
class BarInfor extends React.Component {
constructor(props) {
super(props)
this.springValue = new Animated.Value(0.9)
this.state = {
refreshing: false,
SpeedProgress: 0,
Listdata: [],
selectedItem: '实时统计',
showRightContant: [{name:"场所实时在线率统计",id_name:"online_h"},{name:"场所实时报警统计",id_name:"alarm_h"},{name:"客户端实时安装在线率统计",id_name:"client_h"}],
clickIndex:{
item:{
id_name:"",
name:''
}
},
leftContant:"实时统计"
};
this._onMenuItemSelected = this._onMenuItemSelected.bind(this);
}
goBack = () => {
// alert(1)
this.props.navigation.goBack()
}
goBeginLive() {
this.props.navigation.navigate('LiveNow')
}
goDetails(id) {
console.log(id)
this.props.navigation.navigate('BasicInforDetails', { id: id })
}
render() {
const{showRightContant,clickIndex,leftContant}=this.state
const loading = <View style={{ position: "absolute", top: 20, left: 0, right: 0, alignItems: "center" }}>
<ActivityIndicator size="small" color="#050505" />
</View>
const { Listdata } = this.state
return (
<View style={{ flex: 1, backgroundColor: "#ffffff" }}>
<View style={{ backgroundColor: "#3375fd", height: 50 + StatusBar.currentHeight }}>
<View style={{ position: 'absolute', justifyContent: 'center', top: 0, left: 0, right: 0, height: 45, marginTop: StatusBar.currentHeight }}>
<TouchableOpacity
style={{width: 100,height:40,justifyContent:"center"}}
activeOpacity={1}
onPress={this.goBack}
>
<View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 12, width: 200 }}>
<SvgBack height="20" width="20" style={styles.backbtn} />
<Text style={{ paddingLeft: 5, fontSize: 18, color: "#feffff", fontWeight: '400' }}>返回</Text>
</View>
</TouchableOpacity>
<View style={{ position: 'absolute', left: 0, right: 0, alignItems: "center" }}>
<Text style={{ paddingLeft: 10, fontSize: 22, color: "#feffff", fontWeight: '500' }}>网吧信息</Text>
</View>
</View>
</View>
{/*
<TextInput
numberOfLines={2}
blurOnSubmit={false}
label="备 注"
returnKeyType='send'
// onKeyPress={(e) => this._onKeyPress(e)}
onSubmitEditing={(e) => this._onKeyPress(e)}
placeholder="搜索"
// enablesReturnKeyAutomatically={true}
onChangeText={this.chatInOnchange.bind(this)}
style={{ height: 40, backgroundColor: "#f2f2f2",marginTop:10,marginBottom:10,marginLeft:10,marginRight:10,borderRadius:40 }}
/> */}
<View style={styles.flex}>
{/*内容*/}
<View style={[styles.container, styles.flexDirection]}>
{/*左侧选择栏*/}
<View style={styles.leftMenuStyle}>
<LeftMenu onItemSelected={this._onMenuItemSelected} />
</View>
{/*右侧显示内容*/}
<View style={styles.rightContantSyle}>
{showRightContant?showRightContant.map((item,index)=>
<TouchableOpacity
key={index}
style={{marginBottom:20,paddingTop:10,paddingBottom:10}}
activeOpacity={1}
onPress={this.goBarDetails.bind(this,{leftContant,item})}
>
<View style={{ flexDirection: 'row', alignItems: 'center', paddingLeft: 10,paddingRight:10}}>
<SvgBarHome height="17" width="17" fill={clickIndex.item.id_name===item.id_name?"#3274fc":"#c8c8c8"} style={styles.backbtn} />
<Text style={{ fontSize: 16, color: clickIndex.item.id_name===item.id_name?"#3274fc":"#444444", fontWeight: '300',}}>{item.name}</Text>
</View>
</TouchableOpacity>
)
:
null
}
{/* <Text>{this.state.showRightContant}</Text> */}
</View>
</View>
</View>
</View>
)
}
//点击详情的某个标题进入详情页面
goBarDetails(data){
this.setState({
clickIndex:data
},()=>{
console.log(data)
this.props.navigation.navigate('BarInforDetails',data)
//BarInforDetails为详情页
})
}
_onMenuItemSelected(leftContant, rightContant) {
this.setState({
showRightContant: rightContant,
leftContant:leftContant
});
}
}
const styles = StyleSheet.create({
container: {
// backgroundColor:'yellow',
// justifyContent: 'center',
// paddingHorizontal: 10
},
chatadd: {
alignItems: 'center',
// backgroundColor: '#DDDDDD',
padding: 10,
width: 35,
height: 35
},
chataddBtn: {
alignItems: 'center',
// backgroundColor: '#DDDDDD',
padding: 10,
width: 30,
height: 30
},
button: {
alignItems: 'center',
// backgroundColor: '#DDDDDD',
padding: 10,
width: 25,
height: 25
},
backbtn: {
padding: 10,
width: 15,
height: 15
},
countContainer: {
alignItems: 'center',
padding: 10
},
countText: {
color: '#FF00FF'
},
headerimg: {
borderRadius: 4,
backgroundColor: 'yellow',
width: 39,
height: 39
},
optionmodal: {
justifyContent: "center",
backgroundColor: "blue",
zIndex: 100,
height: 150,
width: '100%',
position: 'absolute',
bottom: -200,
backgroundColor: 'rgb(255,255,255)',
alignItems: 'center',
borderTopWidth: 1,
borderTopColor: "blue",
},
flex: {
flex: 1,
},
flexDirection: {
paddingLeft:10,
paddingRight:10,
flexDirection: 'row',
},
center: {
justifyContent: 'center',
alignItems: 'center',
},
leftMenuStyle: {
borderRightColor: 'grey',
},
rightContantSyle: {
flex: 1,
paddingTop:20,
borderTopWidth:5,
borderTopColor:"#f5f4f9",
},
container: {
flex: 1,
backgroundColor: '#F5FCFF',
},
});
export default BarInfor;
以下引入是我自定义的svg图组件
import { SvgBack, SvgBasicInforHome,SvgBarHome } from "../../../svg/svg"
网友评论