React Native之DrawerLayoutAndroid仿网易云音乐滑动菜单

      针对滑动菜单，Android SDK为我们提供了有 DrawerLayout,在React Native（RN）中对应的组件有DrawerLayoutAndroid.下面简单讲解下该组件的使用.

      首先我们看下要实现的UI.

      

  示例代码：

  <DrawerLayoutAndroid
         ref='drawer'
         drawerWidth={300}
         drawerPosition={DrawerLayoutAndroid.positions.Left}
         renderNavigationView={()=>navigationView}
         onDrawerOpen={()=>this.setState({isMenuOpen:true})}
         onDrawerClose={()=>this.setState({isMenuOpen:false})}
        >

    属性相对很简单这里不做多介绍，详情请参考官方文档：DrawerLayoutAndroid    

    简单说下renderNavigationView属性，该属性传输的参数是func,返回时滑动菜单的View.

    下面首先创建侧滑菜单对应的组件MenuList,我们首先分析用RN该如何布局，对于有些移动开发经验的朋友来说很简单。 如图：

     

   下面我们看下MenuList对应的render方法布局：

[javascript] view plain copy

1. render(){  
2.     return (  
3.       <View style={{flex:1}}>  
4.       <ListView  
5.       style={{backgroundColor:'#ebedee'}}  
6.        dataSource={this.state.dataSource}  
7.        renderRow={this.renderRow.bind(this)}  
8.        renderHeader={this.renderHeader.bind(this)}  
9.       />  
10.   
11.       <View style={{flexDirection:'row',height:46,alignItems:'center'}}>  
12.       <TouchableHighlight style={{flex:1}} underlayColor='#ddd' onPress={()=>alert('设置')}>  
13.       <View style={styles.btn}><Text>设置</Text></View>  
14.       </TouchableHighlight>  
15.       <View style={{backgroundColor:'#d8dadb', width:1/PixelRatio.get(),height:20,}}/>  
16.       <TouchableHighlight style={{flex:1}} underlayColor='#ddd'  
17.       onPress={()=>{  
18.         Alert.alert('退出应用','确定要退出吗?',  
19.         [  
20.           {text:'确定',onPress:()=>{BackAndroid.exitApp()}},  
21.           {text:'取消',onPress:()=>{}}  
22.         ]  
23.       );  
24.               }  
25.     }>  
26.       <View style={styles.btn}><Text>退出应用</Text></View>  
27.       </TouchableHighlight>  
28.       </View>  
29.       </View>  
30.     );  
31.   }  

 代码写的有点凌乱，开发项目最好将相应的方法剥离出来，让render方法尽可能的清晰。

 效果图：

 

关于细节没有过多讲解，可以参考源码，这里讲解下我开发中遇到的问题。

第一：就是布局上面：<Image> ... <Image> 

并不只是View可以作为载体，Image也可以作为载体.一开始总以为RN没有设计好，View只有backgroundColor而没有对应背景图片的设置感觉非常奇怪，而针对Image组件又不知道它竟然可以作为可设置背景图的View来使用，这或许是受到安卓原生开发原因吧。

第二：func的传递调用

如果你之前也是搞安卓的，我想你应该有和我一样的困惑，bind是什么玩意，func的传递怎么这么随意，this怎么和我们Java中的不一样呢。如果你直接就是搞js的，那我瞎掰的还请您高抬贵手，，，

针对bind：如果再你调用的方法中用到的this，那么你就进行绑定进去bind(this)。

[javascript] view plain copy

1. var navigationView =(  
2.      <MenuList  
3.      onMenuItem={this.onMenuItem.bind(this)}  
4.      />  
5.     );  

如上面我们在自定义MenuList组件中定义了一个onMenuItem属性，目的就是将该方法通过属性传递给子组件，通过子组件来回调该方法的执行.这点有点类似于java中的回调接口。

示例代码：

[javascript] view plain copy

1. return(  
2.       <View style={{flex:1}}>  
3.       <TouchableHighlight underlayColor='#ddd' onPress={()=>this.onSelectItem(rowID)}>  
4.       <View style={styles.item} >  
5.       <Image style={{width:40,height:40}} source={image}/>  
6.       <Text style={{color:'#333333',marginLeft:5,fontSize:16}}>{data}</Text>  
7.       </View>  
8.       </TouchableHighlight>  
9.       {rowID==3?<View style={{backgroundColor:'#d8dadb', height:1/PixelRatio.get()}}/>:null}  
10.       </View>  
11.     );  
12.   }  
13.    /** 
14.     每项点击 
15.    **/  
16.   onSelectItem(position){  
17.     var func=this.props.onMenuItem;  
18.     func&&func(position);  
19.   }  

  通过上面代码，我们可以清楚的看出通过TouchableHighlight对应的onPress方法来进行回调传过来的属性方法onMenuItem.

第三:Image显示本地图片.

经过多次尝试，发现Image在使用require('./img/favicon.png')的时候，内部的字符串不仅不能拼接，也不能在外部拼接好在传入调用，必须直接将字符串写进去，否则的话会报错，针对这点不得不吐槽下RN的设计.

  源码链接 

上面讲解只是针对安卓设备的滑动菜单，后续会跟进iOS设备的滑动菜单.http://blog.csdn.net/jj120522/article/details/51860635