Question

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

Answer 1

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

如何将Redux存储中的数据传递到tabBarComponent（3.x）？

1 个答案: