react-native - 仅在登录后才反应本机抽屉

Question

我这里有小吃链接

https://snack.expo.io/@mparvez19861/drawer-navigation?session_id=snack-session-hyLuO4xPa

我试图仅在用户登录时显示抽屉，登录时不会有任何抽屉。

请帮忙

谢谢

标签： react-nativenavigation-drawerreact-native-androidreact-native-navigation

Answer 1

您可以通过将 Drawer Navigator 包装在 Switch Navigator 中来完成此操作。登录后，Switch Navigator 将从登录屏幕（只是一个屏幕）切换到主 App 屏幕（使用 初始化createDrawerNavigator）。

import React, { Component } from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import {
  createSwitchNavigator,
  createStackNavigator,
  createAppContainer,
  createDrawerNavigator,
} from 'react-navigation';

class Screen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Screen</Text>
      </View>
    );
  }
}

class AuthScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Auth Screen</Text>
        <TouchableOpacity onPress={() => this.props.navigation.navigate('App')}>
          <Text>Login</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    marginTop: 40,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

const SomeStackNavigator = createStackNavigator({
  ScreenA: Screen,
  ScreenB: Screen,
});

const AppStack = createDrawerNavigator({
  StackA: {
    name: 'StackA',
    screen: SomeStackNavigator,
  },
  StackB: {
    name: 'StackB',
    screen: SomeStackNavigator,
  },
});

const AppNavigator = createSwitchNavigator(
  {
    App: AppStack,
    Auth: {
      screen: AuthScreen,
    },
  },
  {
    initialRouteName: 'Auth',
  },
);

const AppContainer = createAppContainer(AppNavigator);

export default AppContainer;

在这里查看。