【react native】左边导航右边内容实现

左边导航右边内容 点击某条内容进入该页的详情页

实现效果

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"
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 226,913评论 6赞 527
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 97,710评论 3赞 412
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 174,561评论 0赞 373
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 62,278评论 1赞 306
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 71,080评论 6赞 405
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 54,604评论 1赞 320
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 42,698评论 3赞 434
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 41,847评论 0赞 285
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 48,361评论 1赞 329
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 40,330评论 3赞 353
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 42,487评论 1赞 365
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 38,044评论 5赞 355
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 43,738评论 3赞 342
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 34,134评论 0赞 25
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 35,378评论 1赞 281
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 51,053评论 3赞 385
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 47,471评论 2赞 370