Question

我正在使用redux存储一些值。这些值之一是一个名为“ seen”的布尔值。每当有新消息（通过websocket）到达时，它将更新为“ false”，并且在打开消息屏幕时，它将再次更新为“ true”。

我也有一个制表符。在此标签导航器中，我有4个按钮（图标）：主页，用户，消息和设置。

无论何时“ seen”的值为“ false”，我都希望在选项卡导航器中显示一个额外的图标，以向用户显示他们有新消息。因此，我想访问tabnavigator中的redux存储。

我的tabnavigator代码如下：

const TabsNavigator = createMaterialTopTabNavigator(
    {
        Home: {
            screen: Home,
            navigationOptions: {
                tabBarIcon: () => (
                    <Icon library="far" icon="home" color="black" size={25} />
                )
            }
        },
        Users: {
            screen: Users,
            navigationOptions: {
                tabBarIcon: () => (
                    <Icon library="far" icon="users" color="black" size={25} />
                )
            }
        },
        Messages: {
            screen: Messages,
            navigationOptions: {
                tabBarIcon: () => {
                    return (
                    <View>
                        // HERE I WANT TO HAVE ACCESS TO THE REDUX STORE (SEEN)
                        // I WANT TO SHOW AN ICON WHEN SEEN = FALSE
                        {seen === false &&
                            <Icon library="far" icon="exclamation" color="black" size={25} />
                        }
                        <Icon library="far" icon="comment" color="black" size={25} />
                    </View>
                )}
            }
        },
        Settings: {
            screen: Settings,
            navigationOptions: {
                tabBarIcon: () => (
                    <Icon library="far" icon="cog" color="black" size={25} />
                )
            }
        }
    },
    {
        initialRouteName: 'Home',
        tabBarPosition: 'bottom',
        tabBarOptions: {
            showIcon: true
        }
    }
)

如何在tabnavigator中访问“ seen”（在redux存储中）的值？将useSelector(state => state.messages.seen)添加到tabnavigator无效，我收到一条错误消息，提示“只能从功能组件的主体中调用钩子”。

Answer 1

不太建议这样做，但是如果从配置文件中导出存储，则可以直接访问Redux状态。

例如

const store = createStore(
  persistedAppReducer, // disregard the actual config
  undefined,
  applyMiddleware(NavMiddleware, LoggerMiddleware, EpicMiddleware)
);

export default store;

然后，您可以导入此store并获得如下状态：store.getState()

在Tabnavigator中访问Redux状态（反应导航）

1 个答案: