如何删除抽屉导航上的阴影覆盖？答案

【问题标题】：How to remove shadow overlay on drawer navigation?如何删除抽屉导航上的阴影覆盖？
【发布时间】：2018-03-12 09:48:44
【问题描述】：

我使用抽屉式导航创建了一个侧边菜单。我在后视图上得到阴影覆盖。我想移除阴影覆盖。

这是我现在得到的。您会看到，当抽屉打开时，我的视图上会出现阴影覆盖。

这是我想要的，我希望视图没有阴影。

请在下面找到我的代码，该代码使用抽屉导航创建侧边菜单。

// Drawer.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import Home from './AppNavigation';
import { SideMenu } from "./../Common/UIComponents";
import { widthScale } from "./../Common/Utils/Scaling";

export default DrawerStack = DrawerNavigator({
    Home: { screen: Home },
    MyAccount: { screen: () => <View /> },
    MessageToBigFm: { screen: () => <View /> },
    MeetTheMJs: { screen: () => <View /> },
    Videos: { screen: () => <View /> },
    AboutUs: { screen: () => <View /> },
    ContactUs: { screen: () => <View /> },
    TermsAndConditions: { screen: () => <View /> }
}, {
        contentComponent: SideMenu,
        drawerWidth: widthScale(320),
        drawerBackgroundColor: "transparent",
        style: { backgroundColor: "transparent", opacity: 0, shadowOpacity: 0, shadowColor: "transparent" }
    });

侧边菜单js文件

// SideMenu.js
import React, { Component } from "react";
import { View, Text, ScrollView, Platform } from "react-native";
import { NavigationActions } from "react-navigation";
import style from "./style";
import SideMenuHeader from "./SideMenuHeader";
import { ListFlat } from "./../../UIComponents";
import SideMenuData from "./SideMenuData";
import SideMenuCell from "./SideMenuCell";
import NavigationUtil from "./../../Utils/NavigationUtil";

class SideMenu extends Component {

constructor(props) {
    super(props);
    this.navigateToScreenWithIndex =     this.navigateToScreenWithIndex.bind(this);
    this.renderItemSeperator = this.renderItemSeperator.bind(this)
}

navigateToScreenWithIndex(index) {
    const routeData = SideMenuData[index];
    if (!routeData) {
        return null;
    }
    const routeKey = routeData.navigationKey;
    if (routeKey === null) {
        return;
    }
    const navigateAction = NavigationActions.reset({
        index: 0,
        actions: [
            NavigationActions.navigate({ routeName: routeKey })
        ]
    });
    this.props.navigation.dispatch(navigateAction);
}

renderItemSeperator({ leadingItem }) {
    if (leadingItem.key === 4) {
        return <View style={style.seperator} />
    } else {
        return null;
    }
}

render() {
    return (
        <View style={style.container}>
            {Platform.OS === "ios" && <View style={style.statusBar} />}
            <View style={style.listContainer}>
                <ListFlat
                    horizontal={false}
                    renderHeader={() => <SideMenuHeader />}
                    data={SideMenuData}
                    CellComponent={SideMenuCell}
                    otherProps={{ onCellPress: this.navigateToScreenWithIndex }}
                    renderSeparator={this.renderItemSeperator}
                />
            </View>
        </View>
    );
    }
}

export default SideMenu;

【问题讨论】：

标签： reactjs react-native navigation-drawer react-navigation

【解决方案1】：

我遇到过类似的情况，React 的 Material UI 在显示 Drawer 时添加了一个“MuiBackdrop-root”类 div。这是在 Web 上，但是 React-Native 存在一个移动版本的样式化组件——它可以工作。

使用styled-components 库，我使用类似于以下的CSS 属性来使用“display: none”隐藏它。您必须使用 > 直接定位元素。

类似这样的：

const MyDrawer = styled(Drawer)`
 & > .MuiBackdrop-root {
    display: none;
  }
`;

希望对您有所帮助！

【讨论】：