kylefang/react-native
1
0
Fork 0
mirror of https://github.com/zhigang1992/react-native.git synced 2026-04-23 11:57:46 +08:00
Code Issues Packages Projects Releases Wiki Activity

Add statusBarBackgroundColor to DrawerLayoutAndroid to allow it to open over the status bar

Browse Source 
Summary:The navigation drawer of most apps on android opens over the status bar, this adds an option to do so. It implements a similar API to the native DrawerLayout by adding a statusBarBackgroundColor to DrawerLayoutAndroid.

Without statusBarBackgroundColor:
![image](https://cloud.githubusercontent.com/assets/2677334/13414490/50ebcdf4-df21-11e5-974f-c6a1343c2a4e.png)

With statusBarBackgroundColor:
![image](https://cloud.githubusercontent.com/assets/2677334/13414459/1fdc4086-df21-11e5-9658-bd47bfdb925f.png)

This PR depends on the changes in #6195 to add the `StatusBar.HEIGHT` constant I just want to put it out there now to see if this looks good. To test without the other PR just change `StatusBar.HEIGHT` for `25`.

It is implemented by making the native status bar translucent and making its background color transparent so we can draw a view of the same height as the status bar under it as a child of the DrawerLayoutAndroid. Then we can draw a semi-transparent gray View inside the drawer view to make it
Closes https://github.com/facebook/react-native/pull/6218

Differential Revision: D3017444

Pulled By: bestander

fb-gh-sync-id: ca48a47a20a2feecae360a76f3e2c9bbe6a37700
fbshipit-source-id: ca48a47a20a2feecae360a76f3e2c9bbe6a37700
This commit is contained in:
Janic Duplessis
2016-03-30 05:29:10 -07:00
committed by Facebook Github Bot 6
parent 5bbf88be5a
commit 039924ec70
2 changed files with 79 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
Examples/UIExplorer/UIExplorerApp.android.js
View File

@@ -71,7 +71,8 @@ class UIExplorerApp extends React.Component {
this._overrideBackPressForDrawerLayout = false;
}}
ref={(drawer) => { this.drawer = drawer; }}
renderNavigationView={this._renderDrawerContent.bind(this, onNavigate)}>
renderNavigationView={this._renderDrawerContent.bind(this, onNavigate)}
statusBarBackgroundColor="#589c90">
{this._renderNavigation(navigationState, onNavigate)}
</DrawerLayoutAndroid>
);
@@ -79,15 +80,17 @@ class UIExplorerApp extends React.Component {
_renderDrawerContent(onNavigate) {
return (
<UIExplorerExampleList
list={UIExplorerList}
displayTitleRow={true}
disableSearch={true}
onNavigate={(action) => {
this.drawer && this.drawer.closeDrawer();
onNavigate(action);
}}
/>
<View style={styles.drawerContentWrapper}>
<UIExplorerExampleList
list={UIExplorerList}
displayTitleRow={true}
disableSearch={true}
onNavigate={(action) => {
this.drawer && this.drawer.closeDrawer();
onNavigate(action);
}}
/>
</View>
);
}
@@ -113,9 +116,6 @@ class UIExplorerApp extends React.Component {
const ExampleComponent = UIExplorerExampleList.makeRenderable(ExampleModule);
return (
<View style={styles.container}>
<StatusBar
backgroundColor="#589c90"
/>
<ToolbarAndroid
logo={require('image!launcher_icon')}
navIcon={require('image!ic_menu_black_24dp')}
@@ -131,9 +131,6 @@ class UIExplorerApp extends React.Component {
}
return (
<View style={styles.container}>
<StatusBar
backgroundColor="#589c90"
/>
<ToolbarAndroid
logo={require('image!launcher_icon')}
navIcon={require('image!ic_menu_black_24dp')}
@@ -181,6 +178,10 @@ const styles = StyleSheet.create({
backgroundColor: '#E9EAED',
height: 56,
},
drawerContentWrapper: {
paddingTop: StatusBar.currentHeight,
backgroundColor: 'white',
},
});
AppRegistry.registerComponent('UIExplorerApp', () => UIExplorerApp);