react-native - React Native Redux 条件渲染

Question

我正在尝试根据 redux 商店状态在我的应用程序中呈现 2 个不同的屏幕。

const App = () => {
    return (
        <Provider store={store}>
            <NavigationContainer ref={navigationRef}>
                {store.getState().auth.id ? (
                    <Home />
                ) : (
                    <Stack.Navigator screenOptions={HeaderStyles}>
                        <Stack.Screen
                            name='Splash'
                            component={Splash}
                            options={{ headerShown: false }}
                        />
                        <Stack.Screen name='SignUp' component={SignUp} />
                        <Stack.Screen name='Login' component={Login} />
                    </Stack.Navigator>
                )}
            </NavigationContainer>
        </Provider>
    );
};

启动时store.getState().auth.id未定义，因此应用程序正确显示启动画面。在此屏幕中，我在商店中设置了 auth.id，但应用程序不会重新呈现并停留在启动屏幕中。如果我在不更改任何内容的情况下保存任何源文件，如果强制重新渲染并且我会正确路由到 Home。

当商店发生变化时，如何强制重新评估三元运算符？

标签： react-nativereduxreact-redux

Answer 1

在您的文件中，store它是从它正在创建的文件中导入的，而不是通过道具 ( mapState|| useSelector) 注入的。因为 React 重新渲染是基于 props 的变化 || 状态，组件不知道它应该再次渲染。

解决这个问题的简单方法是在子组件中声明条件部分并正确注入 redux 状态。

 <Provider store={store}>
            <NavigationContainer ref={navigationRef}>
               <Navigator />
            </NavigationContainer>
 </Provider>

   ....


const Navigator = () => { 
   let { id } = useSelector(state => state.auth)
   return !!id ? (
                    <Home />
                ) : (
                    <Stack.Navigator screenOptions={HeaderStyles}>
                        <Stack.Screen
                            name='Splash'
                            component={Splash}
                            options={{ headerShown: false }}
                        />
                        <Stack.Screen name='SignUp' component={SignUp} />
                        <Stack.Screen name='Login' component={Login} />
                    </Stack.Navigator>
                )
  }