React native component drawerlayoutandroid (implementation of the Android drawer)

/**
* Component Drawerlayoutandroid (Implementation of the Android drawer)
The Drawerlayoutandroid properties and methods of this article compare the whole point

* */

Import react,{purecomponent} from ' React '
Import {view,drawerlayoutandroid,text,dimensions,textinput,touchableopacity} from ' React-native '
Class Drawerlayoutobj extends Purecomponent {
Opendrawer= () =>{
This.refs.drawerLayout.openDrawer ()
};
Closedrawer= () =>{
This.refs.drawerLayout.closeDrawer ()
};
Render () {
var Navigationview = (
<view style={{flex:1, BackgroundColor: ' #fff '}}>
<text style={{margintop:45, fontsize:20, textAlign: ' Center '}}> Menu list </Text>
<text style={{margintop:45, fontsize:20, textAlign: ' Center '}}> Menu list </Text>
<text style={{margintop:45, fontsize:20, textAlign: ' Center '}}> Menu list </Text>
<text style={{margintop:45, fontsize:20, textAlign: ' Center '}}> Menu list </Text>
<text style={{margintop:45, fontsize:20, textAlign: ' Center '}}> Menu list </Text>
<text style={{margintop:45, fontsize:20, textAlign: ' Center '}}> Menu list </Text>
<text style={{margintop:45, fontsize:20, textAlign: ' Center '}}> Menu list </Text>
</View>
);
Return (
<drawerlayoutandroid
ref={' Drawerlayout '}
Drawerlockmode= ' Unlocked '
Drawerwidth={dimensions.get (' window '). width-100}
Drawerposition={drawerlayoutandroid.positions.left}
Keyboarddismissmode= "On-drag"
ondrawerclose={() =>{}}
ondraweropen={() =>{}}
rendernavigationview={() = Navigationview}
Rawerbackgroundcolor= "Rgba (188,0,202,0.5)"
Statusbarbackgroundcolor= ' Red '
>
<view style={{flex:1, Alignitems: ' Center '}}>
<touchableopacity
onpress={() =>this.opendrawer ()}
>
<text style={{margin:10, fontsize:15, textAlign: ' Right '}}> open drawer </Text>
</TouchableOpacity>
<touchableopacity
onpress={() =>this.closedrawer ()}
>
<text style={{margin:10, fontsize:15, textAlign: ' Right '}}> close drawer!</text>
</TouchableOpacity>
<textinput/>
</View>
</DrawerLayoutAndroid>
);
}
}
Export default drawerlayoutobj;

/***
*
Drawerlockmode enum (' Unlocked ', ' locked-closed ', ' Locked-open ')

Sets the lock mode of the drawer. There are three kinds of states:

Unlocked (default) means that the drawer can respond to gesture actions that are turned on and off.
Locked-closed means that the drawer will remain closed at this point and cannot be opened with gestures.
Locked-open means that the drawer will remain open and not be closed with gestures.
Regardless of the drawer in that state, you can still call Opendrawer/closedrawer both methods open and close.


drawerposition enum (DrawerConsts.DrawerPosition.Left, DrawerConsts.DrawerPosition.Right)

Specifies which side of the screen the drawer can slide into.

Drawerwidth number

Specifies the width of the drawer, which is the width of the view dragged from the edge of the screen.

Keyboarddismissmode enum (' None ', ' On-drag ')

Specifies whether to hide the soft keyboard during dragging.

None (the default), and dragging does not hide the soft keyboard.

On-drag hides the soft keyboard when the drag is started.

Ondrawerclose function

This callback function is called whenever the Navigation view (drawer) is closed.

Ondraweropen function

This callback function is called whenever the Navigation view (drawer) is opened.

Ondrawerslide function

This callback function is called whenever the Navigation view (drawer) generates interaction.

ondrawerstatechanged function

This callback function is called whenever the state of the drawer changes. The drawer can be in 3 different states:

Idle, which means that there are no ongoing interactions on the navigation bar now.

Dragging (drag-and-drop), indicating that the user is interacting with the navigation bar.

Settling (docked), which indicates that the user has just finished interacting with the navigation bar, and the navigation bar is ending an animation that is turned on or off.

Rendernavigationview function

This method is used to render a navigation view that can be dragged from one side of the screen.


Drawerbackgroundcolor//This property does not seem to work

Specifies the background color of the drawer.
The default value is white.
To set the opacity of the drawer, use RGBA.

Statusbarbackgroundcolor

Set the status bar color (support api21+/Android 5.0 +)

This component also provides Opendrawer and Closedrawer

Opendrawer: Open Drawer
Closedrawer: Close Drawer
ref={' drawerlayout '}//supporting use

Opendrawer () {
This.refs.drawerLayout.openDrawer ()
}
Closedrawer () {
This.refs.drawerLayout.closeDrawer ()
}
* ***/

React native component drawerlayoutandroid (implementation of the Android drawer)