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

Question

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

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

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

<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组件本身能够访问商店，而不必尝试通过App.js文件中的props将redux商店向下传递。