如何根据 redux 存储的内容在 React 导航中动态指定屏幕?

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

正如乔丹指出的那样，这种解决方案奏效了。这是我的片段。

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