Question

从API服务器登录后，我会收到角色信息。

如果是具有管理权限的用户，则应在登录后加载其他屏幕。

App.js

必须为普通用户加载

AppTabNavigator = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
})

那是给经理人的

AppTabNavigator = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
  Configuration: {screen: ConfigurationScreen},
})

Answer 1

如果只有两种类型的用户，则可以使用条件渲染轻松完成。

// imports

const RegularUserNavigation = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
});
const ManagementUserNavigation = createBottomTabNavigator({
  Settings: {screen: SettingsScreen},
  Home: {screen: HomeScreen},
  Board: {screen: BoardScreen},
  Configuration: {screen: ConfigurationScreen},
});

export default class YourScreen extends React.PureComponent {
  constructor(props) {
    super(props);
  }

  state = {
    // I'm assuming once you sign in,
    // these state variables are changed inside your login function
    signedIn: false,
    userRole: null,
  }

  renderManagementUserNavigation = () => {
    return (<ManagementUserNavigation />);
  }

  renderRegularUserNavigation = () => {
    return (<RegularUserNavigation />);
  }

  renderSignInContent = () => {
    // render the sign in contents here
  }

  render() {
    const {signedIn, userRole} = this.state;
    let result = null;

    if (signedIn) {
      result = userRole === 'regular' ?
        this.renderRegularUserNavigation() :
        this.renderManagementUserNavigation();
    } else {
      result = this.renderSignInContent();
    }

    return result;
  }
}

注意-不建议显式渲染多个导航。参见here。但是我们必须使用类似的东西来有条件地渲染导航。

角色相关的用户登录

1 个答案: