Add support for elevation in DrawerLayoutAndroid
Summary:It didn't work for a few reason. First, the drawer view NEEDS to have a background color or no shadow will ever render. Second, we need to use the `setDrawerElevation` method instead of `setElevation` for DrawerLayout. Finally we need to actually pass the style value (maybe we could just pass elevation but I don't really think it can cause any issues) down to the native component as it is not the case at the moment. I also added a default style to elevation of 16 which is the standard for material design according to https://www.google.com/design/spec/patterns/navigation-drawer.html#navigation-drawer-specs. I could also default it to 0 so it keeps the same appearance as before but I think it looks better this way. Closes #6022 **Test plan** Tested using the DrawerLayout in the UIExplorer app. Before, elevation 0 <img width="420" alt="screen shot 2016-02-23 at 1 55 42 am" src="https://cloud.githubusercontent.com/assets/2677334/13244000/008afdb2-d9d1-11e5-95b8-9c345ea0ea8d.png"> After, elevation Closes https://github.com/facebook/react-native/pull/6100 Reviewed By: bestander Differential Revision: D3012242 Pulled By: lexs fb-gh-sync-id: 4967d7ec920f0229d823032ba95c8a3cace329c6 shipit-source-id: 4967d7ec920f0229d823032ba95c8a3cace329c6
This commit is contained in:
parent
36893ecfa0
commit
61483aa15d
|
@ -156,7 +156,7 @@ var DrawerLayoutAndroid = React.createClass({
|
||||||
drawerWidth={this.props.drawerWidth}
|
drawerWidth={this.props.drawerWidth}
|
||||||
drawerPosition={this.props.drawerPosition}
|
drawerPosition={this.props.drawerPosition}
|
||||||
drawerLockMode={this.props.drawerLockMode}
|
drawerLockMode={this.props.drawerLockMode}
|
||||||
style={styles.base}
|
style={[styles.base, this.props.style]}
|
||||||
onDrawerSlide={this._onDrawerSlide}
|
onDrawerSlide={this._onDrawerSlide}
|
||||||
onDrawerOpen={this._onDrawerOpen}
|
onDrawerOpen={this._onDrawerOpen}
|
||||||
onDrawerClose={this._onDrawerClose}
|
onDrawerClose={this._onDrawerClose}
|
||||||
|
@ -218,6 +218,7 @@ var DrawerLayoutAndroid = React.createClass({
|
||||||
var styles = StyleSheet.create({
|
var styles = StyleSheet.create({
|
||||||
base: {
|
base: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
elevation: 16,
|
||||||
},
|
},
|
||||||
mainSubview: {
|
mainSubview: {
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
|
@ -230,6 +231,7 @@ var styles = StyleSheet.create({
|
||||||
position: 'absolute',
|
position: 'absolute',
|
||||||
top: 0,
|
top: 0,
|
||||||
bottom: 0,
|
bottom: 0,
|
||||||
|
backgroundColor: 'white',
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
@ -578,7 +578,8 @@ public class ReactPropertyProcessor extends AbstractProcessor {
|
||||||
if (checkPropertyExists(name)) {
|
if (checkPropertyExists(name)) {
|
||||||
throw new ReactPropertyException(
|
throw new ReactPropertyException(
|
||||||
"Module " + mClassName + " has already registered a property named \"" +
|
"Module " + mClassName + " has already registered a property named \"" +
|
||||||
name + '"', propertyInfo);
|
name + "\". If you want to override a property, don't add" +
|
||||||
|
"the @ReactProp annotation to the property in the subclass", propertyInfo);
|
||||||
}
|
}
|
||||||
|
|
||||||
mProperties.add(propertyInfo);
|
mProperties.add(propertyInfo);
|
||||||
|
|
|
@ -10,6 +10,7 @@ android_library(
|
||||||
react_native_target('java/com/facebook/react/uimanager:uimanager'),
|
react_native_target('java/com/facebook/react/uimanager:uimanager'),
|
||||||
react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
|
react_native_target('java/com/facebook/react/uimanager/annotations:annotations'),
|
||||||
react_native_target('java/com/facebook/react/views/scroll:scroll'),
|
react_native_target('java/com/facebook/react/views/scroll:scroll'),
|
||||||
|
react_native_dep('libraries/fbcore/src/main/java/com/facebook/common/logging:logging'),
|
||||||
react_native_dep('third-party/java/jsr-305:jsr-305'),
|
react_native_dep('third-party/java/jsr-305:jsr-305'),
|
||||||
react_native_dep('third-party/android/support/v4:lib-support-v4'),
|
react_native_dep('third-party/android/support/v4:lib-support-v4'),
|
||||||
],
|
],
|
||||||
|
|
|
@ -11,15 +11,21 @@ package com.facebook.react.views.drawer;
|
||||||
|
|
||||||
import javax.annotation.Nullable;
|
import javax.annotation.Nullable;
|
||||||
|
|
||||||
|
import java.lang.reflect.InvocationTargetException;
|
||||||
|
import java.lang.reflect.Method;
|
||||||
import java.util.Map;
|
import java.util.Map;
|
||||||
|
|
||||||
|
import android.os.Build;
|
||||||
import android.support.v4.widget.DrawerLayout;
|
import android.support.v4.widget.DrawerLayout;
|
||||||
import android.view.Gravity;
|
import android.view.Gravity;
|
||||||
import android.view.View;
|
import android.view.View;
|
||||||
|
|
||||||
|
import com.facebook.common.logging.FLog;
|
||||||
|
|
||||||
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
|
import com.facebook.react.bridge.JSApplicationIllegalArgumentException;
|
||||||
import com.facebook.react.bridge.ReadableArray;
|
import com.facebook.react.bridge.ReadableArray;
|
||||||
import com.facebook.react.common.MapBuilder;
|
import com.facebook.react.common.MapBuilder;
|
||||||
|
import com.facebook.react.common.ReactConstants;
|
||||||
import com.facebook.react.common.SystemClock;
|
import com.facebook.react.common.SystemClock;
|
||||||
import com.facebook.react.uimanager.PixelUtil;
|
import com.facebook.react.uimanager.PixelUtil;
|
||||||
import com.facebook.react.uimanager.ThemedReactContext;
|
import com.facebook.react.uimanager.ThemedReactContext;
|
||||||
|
@ -89,6 +95,24 @@ public class ReactDrawerLayoutManager extends ViewGroupManager<ReactDrawerLayout
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@Override
|
||||||
|
public void setElevation(ReactDrawerLayout view, float elevation) {
|
||||||
|
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
|
||||||
|
// Facebook is using an older version of the support lib internally that doesn't support
|
||||||
|
// setDrawerElevation so we invoke it using reflection.
|
||||||
|
// TODO: Call the method directly when this is no longer needed.
|
||||||
|
try {
|
||||||
|
Method method = ReactDrawerLayout.class.getMethod("setDrawerElevation", float.class);
|
||||||
|
method.invoke(view, PixelUtil.toPixelFromDIP(elevation));
|
||||||
|
} catch (Exception ex) {
|
||||||
|
FLog.w(
|
||||||
|
ReactConstants.TAG,
|
||||||
|
"setDrawerElevation is not available in this version of the support lib.",
|
||||||
|
ex);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@Override
|
@Override
|
||||||
public boolean needsCustomLayoutForChildren() {
|
public boolean needsCustomLayoutForChildren() {
|
||||||
// Return true, since DrawerLayout will lay out it's own children.
|
// Return true, since DrawerLayout will lay out it's own children.
|
||||||
|
|
Loading…
Reference in New Issue