は、ナビゲーションの反応：Reduxのストア

Question

に基づいて変更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); 

しかし、私はthis.props.themeを使用しようとする私を得る：undefined is not an object (evaluating 'this.props.theme')私はtabNavigatorは小道具やそのようなものを受け入れないので、tabNavigatorをreduxストアに接続することができないので、これが起こると思います。どうすれば実行しようとしていますか？

編集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をあなたの機能的なコンポーネントにしましょう。