React Navigation 5 条件渲染与 redux 不工作答案

【问题标题】：React Navigation 5 conditional rendering with redux not workingReact Navigation 5 条件渲染与 redux 不工作
【发布时间】：2020-07-24 19:04:19
【问题描述】：

大家好，我正在尝试理解新的 react navigation 5 我正在使用 redux，但我会做一个小例子来让你理解我的问题......

我创建了一个

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

堆栈.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 添加了条件渲染我得到了这个错误......有人可以帮助我......我试图制作代码简单...我已经看到了反应导航文档中使用的上下文，但目前我不想使用它，因为我必须深入研究它。谢谢你的帮助:)

【问题讨论】：

标签： reactjs react-native react-redux react-navigation

【解决方案1】：

当您有条件地定义屏幕/导航器时，React Navigation 会在您更改条件后自动渲染正确的屏幕。在这种情况下，您不要使用navigate。

来自身份验证流程文档：

请务必注意，在使用此类设置时，您无需通过调用navigation.navigate('Home') 手动导航 到Home 屏幕。当 isSignedIn 变为 true 时，React Navigation 将自动导航到 Home 屏幕。

https://reactnavigation.org/docs/auth-flow#how-it-will-work

所以你需要在成功登录后删除navigation.navigate，因为它会在你在redux中更新你的状态后自动发生。

【讨论】：

【解决方案2】：

您是否定义了堆栈导航器和选项卡导航器？即

const Stack = createStackNavigator(); ?

【讨论】：

这是给帖子作者的问题。您可以通过评论询问它而不是将其作为答案发布。