如何去除抽屉导航上的阴影覆盖？

Question

我使用抽屉导航创建了一个侧面菜单。我在后视图上看到阴影叠加。我想删除阴影覆盖。

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

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

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

// 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;

Answer 1

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

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

类似这样的：

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

希望这对您有帮助！

Answer 2

您可以将

overlayColor="transparent"

属性传递给 Drawer.Navigator 的 screenOptions