React Navigation:如何根据登录的用户角色隐藏 bottomTabNavigator 中的特定选项卡? [英] React Navigation: How to hide specific tab from bottomTabNavigator based on logged in user role?

问题描述

我的屏幕底部有一个标签导航器，结构如下 (HomeScreen.js):

I have a bottom tab navigator in my screen with this structure (HomeScreen.js):

export default createBottomTabNavigator(
  {
    Home: HomeStack,
    Transactions: TransactionsTab,
    Customers: CustomersStack,
    Settings: SettingsTab
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `home`;
        } else if (routeName === 'Transactions') {
          iconName = `file-text`;
        } else if (routeName === 'Customers') {
          iconName = `users`;
        } else if (routeName === 'Settings') {
          iconName = `settings`;
        }

        return <Feather name={iconName} size={25} color={tintColor} />;
      }
    }),
    tabBarOptions: {
      activeTintColor: '#C62828',
      inactiveTintColor: 'gray',
      style: {
        borderTopWidth: 0,
        elevation: 8,
        backgroundColor: '#FFF'
      }
    }
  }
);

在我的 LoginScreen.js 中(如果用户已通过身份验证):

In my LoginScreen.js (if user is authenticated):

resetTo(navigation, 'home');

export function resetTo(navigation, routeName) {
  const resetAction = StackActions.reset({
    index: 0,
    actions: [NavigationActions.navigate({ routeName })]
  });
  navigation.dispatch(resetAction);
}

如果登录的用户没有访问此选项卡的权限，我想隐藏 客户 选项卡，因此选项卡的数量只有 3 个.否则，它将是 4 个.我怎样才能从我的登录屏幕告诉导航器有关用户权限的信息，以便导航器可以显示正确的选项卡?

And I want to hide Customer tab if the logged in user has no privilege to access this tab, so the number of tabs would be only 3. Otherwise, it would be 4. How can I tell the navigator from my login screen about the user privileges so the navigator can show the correct tabs?

推荐答案

如果您也可以向我们提供您的登录屏幕代码，我可以提供更多帮助，根据您的示例代码，您似乎正在使用react-navigation".在您的登录屏幕中执行此操作

If you can provide us with your login screen code too I can provide more help, based on your sample code it seems you are using "react-navigation". In your login screen do this

this.props.navigation.navigate('HomeScreen', {loginStatus: status});

然后在构造函数中的 HomeScreen.js 中，您可以像这样读取变量

Then in your HomeScreen.js in constructor you can read the variable like this

constructor(props) {
    super(props);
    this.status=props.navigation.getParam('loginStatus');
}

最后你可以使用这个变量来像这样显示客户标签

and last you can use this variable to now show the customer tab like this

const test = this.status ? {Home: {screen: MainActivity}} : null;
{
   test,
   Transactions: TransactionsTab,
   Customers: CustomersStack,
   Settings: SettingsTab
}

当然，如果你有很多，如果这个参数在你的屏幕之间传递，你可以使用像 Redux 或 Redux-Saga 这样的框架，它将在你的代码中集中你的状态"

Of course if you have many if this parameter passing between your Screens you can use a framework like Redux or Redux-Saga that will centralize your 'state' throughout your code

这篇关于React Navigation:如何根据登录的用户角色隐藏 bottomTabNavigator 中的特定选项卡?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！