如何将Redux存储中的数据传递给tabBarComponent（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;

似乎react-navigation对传递给tabBarComponent的props进行了控制，并忽略了redux存储中的数据。我也尝试将TabBarComponent与商店连接起来，甚至试图将BottomTabBar与商店连接起来。但是，以上都不起作用。 我知道我们可以将导航器包装在一个组件中并传递数据，但是在react-navigation 3.x中它会产生问题。 是否有解决方案或解决方法将商店中的数据传递给tabBarComponent？ 或者还有其他方法可以达到这个要求吗？谢谢！

Answer 1

终于找到了解决方案。我所做的是将根导航器包装在一个组件中，与redux store连接并将screenProps与我在商店中所需的值一起传递。这样，每个子导航器都可以访问该属性。然后你可以用它来定制标签栏或其他任何内容。希望这可以帮助别人。