如何将 Redux 存储中的数据传递给 tabBarComponent(3.x)？答案

【问题标题】：How to pass data in a Redux store to tabBarComponent(3.x)?如何将 Redux 存储中的数据传递给 tabBarComponent(3.x)？
【发布时间】：2019-03-07 19:54:19
【问题描述】：

我在将数据从 redux 存储传递到 tabBarComponent 时遇到了困难。

反应导航版本：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 的道具，并忽略了来自 redux 存储的数据。我还尝试将TabBarComponent 与商店连接，甚至尝试将BottomTabBar 与商店连接。但是，上述方法均无效。
我知道我们可以将导航器包装在一个组件中并传递数据，但是在 react-navigation 3.x 中它会产生问题。
是否有解决方案或解决方法将存储中的数据传递给tabBarComponent？
或者有没有其他方法可以达到这个要求？谢谢！

【问题讨论】：

你找到解决办法了吗？

标签： react-native redux react-navigation

【解决方案1】：

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

【讨论】：