Как динамически задавать экраны в React Navigation на основе содержимого хранилища избыточности?

Question

Мой навигатор:

import { connect } from 'react-redux';
import { createDrawerNavigator } from 'react-navigation';

const screens = {
  Home: Homecreen,
};
if (this.props.userStatus !== 'active') {
  screens.Upgrade = UpgradeScreen;
}

const MainDrawer = createDrawerNavigator(screens);

const mapStateToProps = (state) => {
  return { userStatus: state.user.status };
};

export default connect(mapStateToProps)(MainDrawer);

Я хочу показать UpgradeScreen, только если статус пользователя не активен.В приведенном выше коде я получаю сообщение об ошибке:

undefined is not an object (evaluating 'this.props.userStatus')

Как это исправить?

Answer 1

Чтобы иметь доступ к this.props.userStatus, у вас должен быть компонент.Вот как вы можете это сделать:

import { connect } from 'react-redux';
import { createDrawerNavigator } from 'react-navigation';

const screens = {
  Home: Homecreen,
};

const MainDrawer = ({ userStatus }) => {
  if (userStatus !== 'active') {
    screens.Upgrade = UpgradeScreen;
  }

  const Navigator = createDrawerNavigator(screens);

  return <Navigator />
}

const mapStateToProps = (state) => {
  return { userStatus: state.user.status };
};

export default connect(mapStateToProps)(MainDrawer);