DrawerLayoutAndroid抽屉式组件 | React

请关注微信公众号,我们将在第一时间更新：

官网提供的属性：

• drawerBackgroundColor

指定抽屉的背景颜色。
默认值为白色。
若要设置抽屉的不透明度,请使用rgba。

  例：drawerBackgroundColor="rgba(188,0,202,0.5)"

• drawerWidth

指定抽屉从屏幕边缘拖进的视图宽度。

    例：drawerWidth={230}

• drawerPosition

指定抽屉可以从屏幕的哪一边滑入,可选参数：
DrawerLayoutAndroid.positions.Left
DrawerLayoutAndroid.positions.Right

   例：drawerPosition={DrawerLayoutAndroid.positions.Left}

• drawerLockMode

设置抽屉的锁定模式,三种模式

• unlocked：不锁定，可以响应打开和关闭操作，默认值;

• locked-losed：抽屉保持关闭，不能用手势打开

• locked-open：抽屉保持打开，不能用手势关闭;

  例：drawerLockMode='locked-open'

• keyboardDismissMode

设置拖动过程中是否隐藏软键盘,可选值有

• none：不隐藏,默认值

• on-drag：拖动时隐藏

  例：keyboardDismissMode="on-drag"

• statusBarBackgroundColor

使抽屉占满整个屏幕，并设置状态栏颜色(支持API21+/安卓系统5.0以上)

   例：statusBarBackgroundColor='red'

• onDrawerStateChanged

抽屉的状态变化时调用此回调函数

• Idle：空闲状态，即没有发生任何交互；

• Dragging：正在拖动状态，用户正在进行交互；

• Settling：依靠中状态，用户刚刚结束交互;

  例：
  onDrawerStateChanged={(state)=>this._DrawerStateChanged(state)}

• onDrawerOpen

每当导航视图（抽屉）被打开之后调用此回调函数

  例：onDrawerOpen={()=>{console.log('打开了')}}

• onDrawerClose

每当导航视图（抽屉）被关闭之后调用此回调函数

    例：onDrawerClose={()=>{console.log('关闭了')}}

• onDrawerSlide

每当导航视图（抽屉）产生交互的时候调用此回调函数

    例：onDrawerSlide={()=>console.log("正在交互......")}

• renderNavigationView

用于渲染一个可以从屏幕一边拖入的导航视图

  例：renderNavigationView={() => navigationView}

let navigationView = (
  <View style={{flex:1}}>            
    <Text style={{margin:10,fontSize:24,color:'#188eee',}}>
      我是侧边栏/抽屉
    </Text>
    <TextInput style={{width:300,height:40,backgroundColor:'#fff'}}/>
    <TouchableHighlight
      onPress={()=>this.closeDrawer()}
      style={{padding:10,backgroundColor:'#e6e6e6',marginTop:20}}
    >
      <Text style={{textAlign:'center',}}>
        closeDrawer:关闭抽屉
      </Text>
    </TouchableHighlight>
 </View>
);

navigationView视图中如果设置了backgroundColor,会覆盖drawerBackgroundColor，不少人在这里遇坑，以为drawerBackgroundColor不起作用

DrawerLayoutAndroid 属性 code

<DrawerLayoutAndroid
    ref={'drawerLayout'}
    drawerBackgroundColor="rgba(188,0,202,0.5)"
    drawerWidth={230}     
    drawerPosition={DrawerLayoutAndroid.positions.Left}          
    renderNavigationView={() => navigationView} 
    onDrawerOpen={()=>{console.log('打开了')}} 
    onDrawerClose={()=>{console.log('关闭了')}}
    onDrawerSlide={()=>console.log("正在交互......")}
    onDrawerStateChanged={(state)=>this._DrawerStateChanged(state)} 
    drawerLockMode='locked-open'         
    keyboardDismissMode="on-drag"    
    statusBarBackgroundColor='red'
>

此组件还提供openDrawer 与 closeDrawer

openDrawer:打开抽屉
closeDrawer：关闭抽屉

• 无论抽屉处于那种状态，都仍然可以调用openDrawer/closeDrawer这两个方法打开和关闭

实例：部分代码

openDrawer(){        
    this.refs.drawerLayout.openDrawer()
}
closeDrawer(){
    this.refs.drawerLayout.closeDrawer()
}
.....(省略其他)...
<TouchableHighlight
  onPress={()=>this.openDrawer()}
  style={{padding:10,backgroundColor:'#e6e6e6'}}
>
  <Text style={{textAlign:'center',}}>
    openDrawer:打开抽屉
  </Text>
</TouchableHighlight>
<TouchableHighlight
  onPress={()=>this.closeDrawer()}
  style={{padding:10,backgroundColor:'#e6e6e6'}}
>
  <Text style={{textAlign:'center',}}>
    closeDrawer:关闭抽屉
  </Text>
</TouchableHighlight>

最后的效果:

微信公众号：Domeday

推送时间为：

AM 7：00 ~ AM 8：30
PM 9：30 ~ PM 11：00

在互联网这个行业，技术的更新迭代速度很快，唯有不断学习和尝试，我们才能立于不败之地，人都是做自己原本不能胜任的事情中，才能快速成长。所以，不要让任何事情成为你不去学习的理由！，你学过的每一样东西，都会在你一生的某个时候派上用场的。