如何为不同的用户创建单独的导航抽屉：React Native

Question

I have an application in which I have 3 drawer items in a custom drawer function.我有一个应用程序，其中我在自定义抽屉功能中有 3 个抽屉项目。 I have a login page as the main component.我有一个登录页面作为主要组件。 What I'm trying to do is to display a specific drawer for admin users and a specific drawer for normal users.我想要做的是为管理员用户显示一个特定的抽屉，为普通用户显示一个特定的抽屉。 I have searched In a number of blogs and documentation and couldn't find anything very useful.我在许多博客和文档中搜索过，但没有找到任何非常有用的东西。

AdminDrawer: Account, Dashboard etc

UserDrawer: Profile, Contact etc

I have tried to achieve this using many methods.我尝试使用多种方法来实现这一点。 I have firebase login and I'm checking user based on TextInput and sending them to corresponding pages.我有 firebase 登录，我正在根据 TextInput 检查用户并将它们发送到相应的页面。 I'm trying to hide some items for normal users.我正在尝试为普通用户隐藏一些项目。

Here is my这是我的

DrawerNavigator.js


const DrawerContent = (props) => (

    <Container>
        <Header style={styles.header}>
            <Body>
                <Image
                    style={styles.head_image}
                    source={require('../assets/logo.png')}
                />
            </Body>
        </Header>
        <Content>
            <DrawerItems {...props} />
        </Content>
    </Container>
)

const DrawerNavigator = createDrawerNavigator(

    {
    Admin: {
        screen: Admin,
        navigationOptions: {
            drawerLabel: "Account",
            drawerIcon: () => (
                <Ionicons name="md-home" style={styles.icon} size={20} />
            )
        }
    },
    Register: {
        screen: Register,
        navigationOptions: {
            drawerLabel: "Register a user",
            drawerIcon: ({ tintColor }) => (
                <Ionicons name="md-person-add" style={styles.icon} size={20} />
            )
        }
    },
    UserPage: {
        screen: User,
        navigationOptions: {
            drawerLabel: "User",
            drawerIcon: ({ tintColor }) => (
                <Ionicons name="md-person-add" style={styles.icon} size={20} />
            )
        }
    }
},
    {
        initialRouteName: 'Admin',
        drawerPosition: 'left',
        contentComponent: DrawerContent,
        drawerOpenRoute: 'DrawerOpen',
    }
);

And here is my这是我的

AppNavigator.js


export default createAppContainer(
    createSwitchNavigator({
        Auth: Login,
        Main:DrawerNavigator,
    })
);

And in the而在

Login.js

I'm doing the login authentication something like,我正在做类似的登录身份验证，

handleLogin = () => {
      const { email , password } = this.state;
      firebase.auth()
          .signInWithEmailAndPassword(email, password)
          .then(() => {

          })
          .catch(error => alert(error))
    }

I would like to hide some drawer items from the normal user or show separate drawer for admin and normal user我想对普通用户隐藏一些抽屉项目或为管理员和普通用户显示单独的抽屉

Answer 1

You can use switch navigation for this case.在这种情况下，您可以使用切换导航。

const mainSwitchNavigator = createSwitchNavigator({
  Admin: {
    screen: AdminDrawer,
  },
  User: {
    screen: UserDrawer,
  }
});

And update handleLogin to this:并将handleLogin更新为：

handleLogin = () => {
  const { email , password } = this.state;
  firebase.auth()
    .signInWithEmailAndPassword(email, password)
    .then(() => {
      if(email == "admin@user.com"){
        this.setState({role:"admin"})
        this.props.navigation.navigate('Admin')
      } else if(email == "normaluser@user.com") {
        this.setState({role:"admin"})
        this.props.navigation.navigate('User')
      }
    })
    .catch(error => alert(error))
}

如何为不同的用户创建单独的导航抽屉：React Native

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-03-09 13:27:32

如何为不同的用户创建单独的导航抽屉：React Native

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-03-09 13:27:32

解决方案1
1 已采纳 2020-03-09 13:27:32