react-native-side-menu使用

						react-native-side-menu使用

一、效果

菜单入口，可以点击，也可以左滑屏幕进入。
二、集成使用
1.依赖包下载

npm install react-native-side-menu --save

2.导入

import SideMenu from 'react-native-side-menu'
import Menu from "./Menu";    //单独的菜单页

3.render中的使用

 		<SideMenu menu={menu}
               openMenuOffset={250}
               isOpen ={this.state.isOpen}
               onChange={(isOpen)=>this.updateMenuState(isOpen)}
         >
                <NavBar
                    leftView={<TouchableOpacity onPress={() => this.toggle()}>
                        <Image source={require('../spjk/videoList/image/app_menu.png')}/>
                    </TouchableOpacity>}
                    midView={<Text style={{color: '#fff', fontSize: 18}}>{this.state.selectedItem}</Text>}
                    rightView={<TouchableOpacity
                        onPress={() => {
                            this.props.navigation.goBack();
                        }}
                    >
                        <Image source={require('../spjk/videoList/image/close.png')}/>
                    </TouchableOpacity>}
                />
                {
                    this.state.selectedItem === '实时预览' ?
                        <KSH_SPJK_LIST
                            data={this.state.unitDetails}
                            navigation={this.props.navigation}
                        />:null
                }
               
            </SideMenu>

4.左右滑动和点击打开菜单设置

toggle() {
  this.setState({ isOpen:!this.state.isOpen, });
 }
 onMenuItemSelected = (item) =>{
     this.setState({ isOpen: false , selectedItem:item , });
 }
 updateMenuState(isOpen){
     this.setState({ isOpen:isOpen, })
 }

5.点击菜单内容跳转效果设置
菜单默认页面设置

this.state = {
            isOpen:false,
            selectedItem:'实时预览',
        }

6.菜单页的跳转赋值

<TouchableOpacity onPress={()=>this.props.onItemSelected('实时预览')}>
     <View style={{height:46,backgroundColor:'#ffffff',justifyContent:'space-between',flexDirection:'row',alignItems:'center',paddingLeft:10,paddingRight:10}}>
           <View style={{flexDirection:'row',alignItems:'center'}}>
               <Image
                   source={require('../spjk/videoList/image/shishiyulan.png')}/>
               <View style={{marginLeft:15,}}>
                   <Text style={{fontSize:15,color:'#333333',}}>实时预览</Text>
               </View>
           </View>
           <View style={{justifyContent:'flex-end',alignItems:'flex-end'}}>
               <Image
                   source={require('../spjk/videoList/image/into.png')}/>
           </View>
       </View>
   </TouchableOpacity>

三、组件其他属性
略
npm地址：https://www.npmjs.com/package/react-native-side-menu