反应导航隐藏抽屉项目

Question

我正在使用React导航5。 我在标题中有一个设置图标，该图标会路由到“设置屏幕”。所以我想从抽屉里隐藏路线。 这是我的代码。

我有

我的 CustomDrawerContent

const newState = { ...state };
newState.routes = newState.routes.filter((item) => item.name !== "Setting");

其渲染功能具有：

<DrawerItemList state={newState} {...props} />

用于设置的抽屉项目仍然有一个空容器。当我做console.log（newState.routes）时，它没有设置。

整个文件在下面

import React, { useContext } from "react";
import { View, StyleSheet } from "react-native";
import { connect } from "react-redux";
import {
  Text,
  Avatar,
  ThemeContext,
  Button,
  Divider,
  SocialIcon,
  Icon,
} from "react-native-elements";
import {
  DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
} from "@react-navigation/drawer";
import { signOut } from "../store/actions/authActions";

const CustomDrawerContent = (props) => {
  const { theme } = useContext(ThemeContext);
  const { state } = props;
  const signOut = props.signOut;
  const newState = { ...state };
  newState.routes = newState.routes.filter((item) => item.name !== "Setting");

  return (
    <View style={{ flex: 1, backgroundColor: "#f5f5f5" }}>
      <DrawerContentScrollView {...props}>
        <View style={{ paddingVertical: 10, paddingHorizontal: 45 }}>
          {/* View for profile pic area */}
          <View
            style={{
              display: "flex",
              flexDirection: "column",
              marginTop: 25,
            }}
          >
            <Avatar
              size="large"
              rounded={true}
              icon={{ name: "rocket", color: "orange", type: "font-awesome" }}
              overlayContainerStyle={{ backgroundColor: "white" }}
              onPress={() => console.log("Works!")}
              activeOpacity={0.7}
              containerStyle={{ flex: 1 }}
            />
            <Text
              style={{
                fontSize: 18,
                fontWeight: "bold",
                paddingTop: 10,
                color: "#555",
              }}
            >
              Olivia Groza
            </Text>
            <Text style={theme.Text.captionStyles}>@Govliva</Text>
            <Button title="Go Pro" containerStyle={{ marginTop: 10 }}></Button>
          </View>
        </View>
        <Divider
          style={{ margin: 10, backgroundColor: "#dddddd", height: 1 }}
        ></Divider>
        {console.log(newState.routes)}
        <DrawerItemList state={newState} {...props} />
        <DrawerItem
          icon={({ color, size }) => (
            <Icon name="home" type="material-community" color={color} />
          )}
          label="Logout"
          onPress={signOut}
        />
      </DrawerContentScrollView>
      <View style={styles.shareContainer}>
        <SocialIcon type="twitter" iconSize={18} style={styles.iconContainer} />
        <SocialIcon
          type="facebook"
          iconSize={18}
          style={styles.iconContainer}
        />
        <SocialIcon
          type="instagram"
          iconSize={18}
          style={styles.iconContainer}
        />
      </View>
    </View>
    // <DrawerContentScrollView {...props}>
    //   <DrawerItemList {...props} />
        //   <Text>adfafsd</Text>
    // </DrawerContentScrollView>
  );
};

const styles = StyleSheet.create({
  shareContainer: {
    paddingHorizontal: 10,
    display: "flex",
    flexDirection: "row",
    // justifyContent: "center"
  },
  iconContainer: {
    height: 40,
    width: 40,
  },
});

const mapStateToProps = (state) => {
  return {};
};

const mapDispathToProps = (dispatch) => {
  return {
    signOut: () => dispatch(signOut()),
  };
};

export default connect(mapStateToProps, mapDispathToProps)(CustomDrawerContent);