时间戳

首页 > 解决方案 > 除了使用 React Native 登录时，如何在任何屏幕上显示抽屉（SideMenu）？

react-native - 除了使用 React Native 登录时，如何在任何屏幕上显示抽屉（SideMenu）？

问题描述

我在尝试实现这一目标时遇到了几个问题。

在此处输入图像描述

sidemenu没有显示在屏幕Login上，但在Home组件中是（这很好）。

但是如果我回到登录组件（通过单击菜单导航项），drawer现在会显示从login（它只必须显示在Home组件上）。我不知道为什么没有template显示我必须放在抽屉中的 ，默认情况下，我创建的路线会出现，并且出现此问题（我试图将 atemplate放在sidemenu..

我怎样才能解决这个问题？

这是我的代码：

应用程序.js

import React from "react";
import { StyleSheet, View } from "react-native";
import UserNavigation from "./app/navigation/UserNavigation";
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  render() {

    return <UserNavigation />;
  }
}

用户导航.js

import React from "react";
import {
  Platform,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  ScrollView,
  Dimensions,
  Image
} from "react-native";
import { createDrawerNavigator, DrawerItems } from "react-navigation-drawer";
import { createAppContainer, createSwitchNavigator } from "react-navigation";
import { createStackNavigator } from "react-navigation-stack";
import { Icon } from "native-base";
import LoginScreen from "../screens/login/Login";
import HomeScreen from "../screens/home/Home";
const { width } = Dimensions.get("window");

const CustomDrawerNavigation = props => {
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <View
        style={{
          height: 250,
          backgroundColor: "#fff",
          opacity: 0.9
        }}
      >
        <View
          style={{
            height: 200,
            backgroundColor: "Green",
            alignItems: "center",
            justifyContent: "center"
          }}
        >
          <Image
            source={require("../../assets/img/logo.webp")}
            style={{ resizeMode: "contain", width: "100%" }}
          />
        </View>
        <View
          style={{
            height: 50,
            backgroundColor: "Green",
            alignItems: "center",
            justifyContent: "center"
          }}
        ></View>
      </View>
      <ScrollView>
        <DrawerItems {...props} />
      </ScrollView>

      <View style={{ left: 20, bottom: 20 }}>
        <View style={{ flexDirection: "row" }}>
          <View
            onPress={() => props.navigation.navigate("Login")}
            style={{
              flexDirection: "row",
              alignItems: "flex-start",
              justifyContent: "center",
              marginRight: 15
            }}
          >
            <Icon
              type="MaterialCommunityIcons"
              name="logout"
              style={{ fontSize: 24 }}
              onPress={() => props.navigation.navigate("Login")}
            />
            <Text>Salir</Text>
          </View>
        </View>
      </View>
    </SafeAreaView>
  );
};

const DrawerStack = createStackNavigator({
  Home: HomeScreen
});

const DrawerNavigation = createDrawerNavigator({
  Home: {
    name: "Home",
    screen: HomeScreen
  },
  Login: {
    name: "Cerrar Sesión",
    screen: LoginScreen
  }
});

const AppNavigator = createSwitchNavigator(
  {
    App: DrawerNavigation,
    Login: {
      screen: LoginScreen
    }
  },
  {
    initialRouteName: "Login",
    drawerPosition: "left",

我还有一个问题，我不知道为什么CustomDrawerNavigation我必须放入抽屉的模板 ( ) 没有显示。

    contentComponent: CustomDrawerNavigation,
    drawerOpenRoute: "DrawerOpen",
    drawerCloseRoute: "DrawerClose",
    drawerToggleRoute: "DrawerToggle",
    drawerWidth: (width / 3) * 2
  }
);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

登录.js

import React, { Component } from "react";
import { View } from "react-native";
import { Button, Text } from "native-base";

export default class Login extends Component {
  constructor() {
    super();
    this.state = {};
  }

  handlerLogin = async () => {
    this.props.navigation.navigate("Home");
  };

  render() {
    return (
      <View>
        <Text>Login</Text>

        <Button block button onPress={() => this.handlerLogin()}>
          <Text>Go to home</Text>
        </Button>
        <Text>Login</Text>
      </View>
    );
  }
}

主页.js

import React, { Component } from "react";
import { StyleSheet } from "react-native";
import { StatusBar } from "react-native";
import {
  Container,
  Header,
  Title,
  Left,
  Icon,
  Right,
  Button,
  Body,
  Content,
  Text,
  Card,
  CardItem
} from "native-base";

export default class Home extends Component {
  constructor() {
    super();
    this.state = {
      loading: false
    };
  }

  closeDrawer = () => {
    this.drawer._root.close();
  };
  openDrawer = () => {
    this.drawer._root.open();
  };

  render() {
    return (
      <Container>
        <Header>
          <Left>
            <Button
              transparent
              onPress={() => this.props.navigation.openDrawer()}
            >
              <Icon name="menu" />
            </Button>
          </Left>
          <Body>
            <Title>HomeScreen</Title>
          </Body>
          <Right />
        </Header>
        <Content padder>
          <Card>
            <CardItem>
              <Body>
                <Text>Home</Text>
              </Body>
            </CardItem>
          </Card>
        </Content>
      </Container>
    );
  }
}

标签： react-native

解决方案

为此，您可以创建两个导航器。

优点： 1. 登录后按返回无法返回登录界面 2. 侧抽屉在登录页面不可见

我们需要的进口：

import { createAppContainer, createSwitchNavigator } from 'react-navigation';  import { createStackNavigator } from 'react-navigation-stack';   import { createDrawerNavigator } from 'react-navigation-drawer';

登录堆栈：

const LoginStack = createStackNavigator(
    {
        Login: {
            screen: Login,
            navigationOptions: {
                title: 'Login',
                headerLeft: null,
                header: null
            }
        },
        forgotPassword: {
            screen: ForgotPassword,
            navigationOptions: {
                title: 'Forgot Password'
            }
        }
    },
    {
        initialRouteName: 'Login',
    } );

主页堆栈：

const homePageBottomNavigationStack = createStackNavigator(
        {
            Home: {
                screen: Login,
                navigationOptions: {
                title: 'Login',
                headerLeft: null,
                header: null
            },
        },
        {
            initialRouteName: 'Home',
        } )

抽屉导航器：

const PostLoginStack = createDrawerNavigator(
        {
            Home: {
                screen: homePageBottomNavigationStack
            }
        } );

切换导航器：

const switchNavigator = createSwitchNavigator(
        {
            LoginStack: LoginStack,
            PostLoginStack: PostLoginStack
        },
        { headerMode: "none", initialRouteName: "LoginStack" } );


const AppContainer = createAppContainer(switchNavigator);

包.json：

    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-gesture-handler": "^1.5.1",
    "react-native-paper": "^3.2.1",
    "react-native-reanimated": "^1.4.0",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.3.3",
    "react-navigation-material-bottom-tabs": "^2.1.5",
    "react-navigation-stack": "^1.10.3"

对于拥有自定义抽屉组件，请进行以下更改：

const PostLoginStack = createDrawerNavigator(
            {
                Home: {
                    screen: homePageBottomNavigationStack
                }
            },
            {
                contentComponent: YourCustomDrawerComponent
            }
            );

推荐阅读