如何将Redux存储中的数据传递到TABBARCOMPONEN(3.x)

Question

我被卡住了从redux商店传递到tabbarcomponent的数据。

React-Navigation版本：3.x

要求：我将主题颜色存储在Redux商店中，并希望基于主题颜色自定义我的底部标签栏。

以下是从官方文档中学到的，并尝试了

class TabBarComponent extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    console.log(this.props);
    return <BottomTabBar {...this.props} activeTintColor={this.props.theme} />;
  }
}
// const TabBarComponent = (props) => <BottomTabBar {...props} />;
let { popularPage, trendingPage, favoritePage, mePage } = homeTabs;
let dynamicTabs = { popularPage, trendingPage, favoritePage, mePage };
const homeTabNavigator = createBottomTabNavigator(dynamicTabs, {
  tabBarComponent: (props) => <TabBarComponent {...props} />,
});
const mapState = (state) => ({
  theme: state.theme.theme,
});
connect(
  mapState,
  null,
)(homeTabNavigator);
export default homeTabNavigator;

看来，反应 - 动态对传递给TABBARCOMPONEN的道具的控制权，而忽略了Redux Store的数据。我还尝试将TabBarComponent与商店连接起来，甚至尝试将BottomTabBar与商店连接起来。但是，以上都没有作用。
我知道我们可以将导航器包裹在组件中并传递数据，但是在React-Navigation 3.x中会产生问题。
是否有解决方案或可以将商店中的数据传递给tabBarComponent？
还是有其他方法可以达到这一要求？谢谢！

Answer 1

最终找到解决方案。我所做的是将根导航器包裹在组件中，与Redux Store连接并通过我在商店中所需的值传递ScreenProps。这样，每个子导航器都可以访问此属性。然后您可以使用它来自定义您的标签栏或其他任何东西。希望这可以帮助别人。