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。这是在Web上，但是有一个可用于React-Native的移动版本的样式化组件-可以使用。

使用styled-components库，我使用了类似于下面的CSS属性，使用“ display：none”将其隐藏。您必须使用>直接定位元素。

类似这样的东西：

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

希望这对您有帮助！

如何删除抽屉导航上的阴影叠加？

1 个答案: