如何更改抽屉导航器内容响应本机

Question

我的应用程序中既有DrawerNavigator又有StackNavigator。有两个用户members和limited用户。

因此limited当用户登录时，我想从DrawerNavigator中删除MyProfile，并且member登录时应该显示MyProfile。如何实现这一点。请查看我的代码。

const AppNavigator = createStackNavigator(
{
Splash: { screen: Splash },
Login: { screen: Login },
Home: { screen: Home },
About: { screen: About },
ListEvents: { screen: ListEvents }
},
{
initialRouteName: 'Splash',
headerMode: 'none'
}
);
const DrawerNavigator = createDrawerNavigator({
Home: AppNavigator,
MyProfile: { screen: MyProfile },
About: { screen: About }
});
const MainNavigation = createSwitchNavigator({
HomeDrawer: DrawerNavigator,
AuthStack: AppNavigator
})
const AppContainer = createAppContainer(MainNavigation);
export default AppContainer;

如何在上面的代码中实现我的结果？我不知道该怎么做。

Answer 1

假设你有一个布尔限制，那么你可以传递给一个函数来根据条件获取 AppContainer

export default function AppContainer(limited) {
const AppNavigator = createStackNavigator(
{
Splash: { screen: Splash },
Login: { screen: Login },
Home: { screen: Home },
About: { screen: About },
ListEvents: { screen: ListEvents }
},
{
initialRouteName: "Splash",
headerMode: "none"
}
);
const DrawerNavigator = limited
? createDrawerNavigator({
Home: AppNavigator,
About: { screen: About }
})
: createDrawerNavigator({
Home: AppNavigator,
MyProfile: { screen: MyProfile },
About: { screen: About }
});
const MainNavigation = createSwitchNavigator({
HomeDrawer: DrawerNavigator,
AuthStack: AppNavigator
});
return createAppContainer(MainNavigation);
}

然后在您的 AppRegistry 组件中使用它

import React from "react";
import AppContainer from "./AppContainer";
export default class App extends React.Component {
render() {
const limited = true; // set true or false
const Navigation = AppContainer(limited);
return <Navigation />;
}
}