gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 21:32:00 26 4
gpt4 key购买 nike

我有一个应用程序,其中自定义抽屉功能中有 3 个抽屉项目。我有一个登录页面作为主要组件。我想做的是为管理员用户显示一个特定的抽屉,为普通用户显示一个特定的抽屉。我搜索了许多博客和文档,但找不到任何有用的东西。

AdminDrawer: Account, Dashboard etc

UserDrawer: Profile, Contact etc

我尝试使用多种方法来实现这一目标。我有 firebase 登录,我正在根据 TextInput 检查用户并将它们发送到相应的页面。我正在尝试为普通用户隐藏一些项目。

这是我的

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',
}
);

这是我的

AppNavigator.js

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

并且在

Login.js

我正在执行类似的登录身份验证,

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

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

我想对普通用户隐藏一些抽屉项目或为管理员和普通用户显示单独的抽屉

最佳答案

对于这种情况,您可以使用切换导航。

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

并将 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))
}

关于javascript - 如何为不同用户创建单独的抽屉导航 : React Native,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60599732/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com