带有Redux的Reaction Navigation 5条件渲染不起作用

Question

所以大家好，我试图理解新的反应导航5我正在与redux一起工作，但是我将举一个小例子让您理解我的问题，所以...

我创建了一个

Stack.js文件暂时将我所有的堆栈放到哪里，我只使用了2个类，如LoginStack和TabNavStack（重定向到HomeScreen），现在以这个示例为例，我只制作了一个堆栈导航器并传递了组件函数，因此这里是代码：

Stack.js

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

export function TestStackNav() {
    const isAuth = useSelector(state => state.loginReducer); // i will explain why i need this thing here :)

    return <Stack.Navigator>
                <Stack.Screen
                        name="LoginScreen"
                        component={LoginContainer}/>
                <Stack.Screen 
                    name="TabNav"
                    component={TabNav}/>
            </Stack.Navigator>
}

 export function TabNav() {
    return (
        <Tab.Navigator>
            <Tab.Screen name="AnimeScreen" component={AnimeContainer} />
            <Tab.Screen name="HomeScreen" component={HomeScreen} />
            <Tab.Screen name="SettingsScreen" component={SettingsScreen} />
        </Tab.Navigator>

    );
}

现在在我的loginContainer中，我使redux正常工作，只是分发了道具和其他东西，但是将CONNECT容器连接到LoginScreen，这很好用，因为在应用程序启动时，我们现在在登录屏幕中看到登录屏幕，我有我的BIG AND OLD登录按钮，检查数据将分派操作和其他操作，最后将仅导航到this.props.navigation.navigate（“ TabNav”，{screen：'HomeScreen'}），此方法工作正常，因为他在主屏幕...。但是问题是，如果我基于我在Stack.js中的reduxStore中所拥有的内容使用条件渲染，就这样

export function TestStackNav() {
    const isAuth = useSelector(state => state.loginReducer);
    return <Stack.Navigator>
        {isAuth.logged ?
            <Stack.Screen
                name="TabNav"
                component={TabNav} />
            :
            <Stack.Screen
                name="LoginScreen"
                component={LoginContainer}
            />}
    </Stack.Navigator>
}

所以现在具有相同的逻辑，但只是从reduxStore中放入条件渲染，我得到了

我从字面上更改了loginScreen的所有内容，所有其他屏幕都相同，但只是向Stack Navigator添加了条件渲染，但出现了此错误...有人可以帮助我...我试图简化代码...我已经看到了react导航文档中使用的上下文，但是目前我不想使用它，因为我必须深入研究它。感谢您的帮助：）

Answer 1

您是否定义了堆栈导航器和标签导航器？即>

const Stack = createStackNavigator(); ?