React native 反应导航：基于redux存储更改tabNavigator样式

因此，我尝试根据存储状态设置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);

router.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);

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;

从'react navigation'导入{TabNavigator}；
从“./components/TabBar”导入TabBar；
从“./屏幕/板”导入板；
从“/屏幕/设置”导入设置；
从“./screens/Bookmarks”导入书签；
const Tabs=TabNavigator(
//屏风
{
董事会：{
屏幕：电路板，
导航选项：{
tabBarLabel:'Boards'，
tabBarIcon:（）=>，
},
},
书签：{
屏幕：书签，
导航选项：{
tabBarLabel:“书签”，
tabBarIcon:（）=>，
},
},
设置：{
屏幕：设置，
导航选项：{
tabBarLabel:“设置”，
tabBarIcon:（）=>，
},
},
},
//选项卡导航器配置
{
tabBarPosition:'底部'，
TabBar组件：TabBar，
},
);
导出默认选项卡；

您可以创建自己的选项卡栏，将其连接到导航器和redux

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

export default connect(mapStateToProps)(MyAwesomeTabBar);

---

至于表现/功能组件的分离，我认为与其说不这样做是不好的做法，不如说这样做是好的做法。而且，您也可以很容易地在这里将其分离，只需将

MyAwesomeTabBar

作为您的功能组件，它使用了一组表示组件。

您可以使用自己的选项卡组件并将其连接到Redux。然后将该组件用作导航器中的栏。我想到了这一点，但将表示组件连接到redux应用商店不是一个坏的做法吗？如果不是这样的话，我该怎么做？我试过了，但没有成功。当我这样做时，我得到了

TypeError:undefined不是一个对象（评估'navigation.state'）

您是否将导航状态存储在Redux中？不，我没有，因为我认为这样做没有必要。我应该这样做吗？我不确定这是否相关，但如果没有它，react导航中的一些功能就无法正常工作。另外，将您的状态保持在一个位置也是有意义的。它是否说明了

导航.state

代码所在的位置？

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