使用 React-Native-Router-Flux 在所有屏幕中显示组件 - React Native

Question

我有一个基于RNRF的项目，我需要根据Redux状态在所有屏幕上显示一个倒计时组件。

我需要在所有屏幕的右下角设置倒计时：

我尝试在 Provider 中设置，但我无法从 redux store 读取状态，以启用或禁用计数器。

<Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
        <Router />
        <Counter
            data={'123456'}
            mission={'1'}
            bgColor={'#6F31E2'}
            textColor={'#FFFFFF'}
        />
    </PersistGate>
</Provider>

是否可以使用 React Native Router Flux 做到这一点？

Answer 1

通过将 Counter 组件放入 App.js 中，就像您在代码片段中所做的那样，这是 100% 可能的。

我不确定您所说的无法从 redux 存储访问状态是什么意思。我刚刚在我现有的一个生产应用程序中创建了一个演示计数器来测试它。只要您使用 react-redux 中的 "connect" 函数，您就应该能够连接到 Counter 组件中的全局 redux 存储：

这是我在演示中使用的工作 Counter.js 文件：

编辑澄清：使用 connect 将允许 Counter 组件本身 能够访问商店，而不是尝试通过 [=25] 的 props 向下传递 redux 商店=] 文件.

使用 React-Native-Router-Flux 在所有屏幕中显示组件 - React Native

Show a component in all screens with React-Native-Router-Flux - React Native

android

ios

react-native

react-native-router-flux