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);

Answer 2

正如jordan指出的那样，该解决方案行之有效。这是我的摘录。

const MyDrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen
  },
  Second: {
    screen: SecondScreen
  }
});

const MyApp = createAppContainer(MyDrawerNavigator);

const myCustomComp = props => {
  const username = useSelector(state => state.AuthReducer.username);
  const FirstCase = createAppContainer(MyDrawerNavigator);
  const SecondCase = createAppContainer(
    createDrawerNavigator({
      Home: {
        screen: HomeScreen
      }
    })
  );
  return username === "berkelmass" ? <FirstCase /> : <SecondCase />;
};

const mapStateToProps = state => ({
  username: state.AuthReducer.username
});

export default connect(mapStateToProps)(myCustomComp);

如何基于redux存储的内容在React Navigation中动态指定屏幕？

2 个答案: