反应导航：根据redux商店更改tabNavigator样式

Question

所以我试图根据商店状态设置tabNavigator的样式：

import React from 'react';
import { connect } from 'react-redux';
import { TabNavigator } from 'react-navigation';

const Tabs = TabNavigator(
  // Screens
  {
    Boards: {
      screen: Boards,
      navigationOptions: {
        tabBarLabel: 'Boards',
        tabBarIcon: () => <MaterialCommunityIcon name="bulletin-board" size={25} color="white" />,
      },
    },
    Bookmarks: {
      screen: Bookmarks,
      navigationOptions: {
        tabBarLabel: 'Bookmarks',
        tabBarIcon: () => <EntypoIcon name="bookmarks" size={25} color="white" />,
      },
    },
    Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: () => <MaterialCommunityIcon name="settings" size={25} color="white" />,
      },
    },
  },
  // TabNavigator configuration
  {
    tabBarPosition: 'bottom',
    tabBarOptions: {
      showIcon: true,
      showLabel: false,
      renderIndicator: () => null,
      style: {
        // TODO: Make tabNavigation color change based on current selected theme.
        backgroundColor: this.props.theme === 'default' ? 'black' : 'red',
      },
    },
  },
);

const mapStateToProps = state => {
  return {
    theme: state.configuration.theme,
  };
};

export default connect(mapStateToProps)(Tabs);

但是当我尝试使用this.props.theme我得到：undefined is not an object (evaluating 'this.props.theme')我想这是因为tabNavigator不接受道具或类似的东西，所以我无法将tabNavigator连接到redux商店，所以我怎么能实现我的我想干什么？

Edit 1

尝试使用上面建议的方式使用自定义标签栏解决此问题后，会弹出以下错误：

和代码：

TabBar.js

import React from 'react';
import { connect } from 'react-redux';
import { TabBarBottom } from 'react-navigation';

const TabBar = ({ theme }) => (
  <TabBarBottom style={{ backgroundColor: theme === 'dark' ? 'black' : 'red' }} />
);

const mapStateToProps = state => ({
  theme: state.configuration.theme,
});

export default connect(mapStateToProps)(TabBar);

router.js

import { TabNavigator } from 'react-navigation';

import TabBar from './components/TabBar';

import Boards from './screens/Boards';
import Settings from './screens/Settings';
import Bookmarks from './screens/Bookmarks';

const Tabs = TabNavigator(
  // Screens
  {
    Boards: {
      screen: Boards,
      navigationOptions: {
        tabBarLabel: 'Boards',
        tabBarIcon: () => <MaterialCommunityIcon name="bulletin-board" size={25} color="white" />,
      },
    },
    Bookmarks: {
      screen: Bookmarks,
      navigationOptions: {
        tabBarLabel: 'Bookmarks',
        tabBarIcon: () => <EntypoIcon name="bookmarks" size={25} color="white" />,
      },
    },
    Settings: {
      screen: Settings,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: () => <MaterialCommunityIcon name="settings" size={25} color="white" />,
      },
    },
  },
  // TabNavigator configuration
  {
    tabBarPosition: 'bottom',
    tabBarComponent: TabBar,
  },
);

export default Tabs;

Answer 1

您可以创建自己的标签栏，将其连接到导航器和redux。

const MyAwesomeTabBar = ({theme}) => (
  <View>
    ...
  </View>
)

export default connect(mapStateToProps)(MyAwesomeTabBar);

然后在导航器定义中：

const Tabs = TabNavigator(
  // Screens
  {
    ...
  },
  // TabNavigator configuration
  {
    tabBarPosition: 'bottom',
    tabBarComponent: MyConnectedAwesomeTabBar
  },
);

至于表达/功能组件的分离 - 我认为不这样做并不是不好的做法，就像这样做是好的做法。并且，您也可以很容易地将它分开，只需将MyAwesomeTabBar作为您的功能组件，它使用一堆表示组件。