反応ナビゲーション：現在のタブに基づいてタブバーの色を変更する方法

Question

私は反応ナビゲーションを使い始めています。
タブを変更すると、タブバーの背景色を変更するにはどうすればよいですか？私のコードが間違っ:-)がそうどのようなので、それは常に罰金である（白をデフォルトだ分で

_backgroundColor = function() { 
    switch (this.routeName) { 
     case 'tabHome':  return { backgroundColor: '#002663' }; 
     case 'tabRewards': return { backgroundColor: '#3F9C35' }; 
     default:   return { backgroundColor: 'white' }   
    } 
} 

// Tabs setup 
export const TabStack = TabNavigator({ 
    tabHome:  { screen: HomeStack,  }, 
    tabRewards: { screen: RewardsStack, }, 
}, { 
    tabBarOptions: { 
    style: _backgroundColor(), 
    } 
}); 

：ここ

はいくつか 擬似コード私が望んでいるものを示しています私は 何かを渡して、この論理をrouteNameまたはiconLabelのいずれかでトリガーします。

ご協力いただければ幸いです。
ありがとうございます。
乾杯

Answer 1

import React from 'react'; 
import { Image, View } from 'react-native'; 
import { StackNavigator, TabNavigator, TabBarBottom } from 'react-navigation'; 

const Screen =() => <View />; 

const Tabs = TabNavigator(
    { 
    Tab1: { 
     screen: Screen, 
     navigationOptions: { 
     title: 'Tab1', 
     tabBarIcon: ({ tintColor }) => 
      (<Image 
       source={require('../images/iconNotificationNew.png')} 
       style={[{ tintColor }]} 
      />), 
     }, 
    }, 
    Tab2: { 
     screen: Screen, 
     navigationOptions: { 
     title: 'Tab2', 
     tabBarIcon: ({ tintColor }) => 
      (<Image 
       source={require('../images/iconNotificationNew.png')} 
       style={[{ tintColor }]} 
      />), 
     }, 
    }, 
    Tab3: { 
     screen: Screen, 
     navigationOptions: { 
     title: 'Tab3', 
     tabBarIcon: ({ tintColor }) => 
      (<Image 
       source={require('../images/iconNotificationNew.png')} 
       style={[{ tintColor }]} 
      />), 
     }, 
    }, 
    }, 
    { 
    lazy: true, 
    tabBarComponent: props => { 
     const backgroundColor = props.position.interpolate({ 
     inputRange: [0, 1, 2], 
     outputRange: ['orange', 'white', 'green'], 
     }) 
     return (
     <TabBarBottom 
      {...props} 
      style={{ backgroundColor: backgroundColor }} 
     /> 
    ); 
    }, 
    swipeEnabled: true, 
    animationEnabled: true, 
    tabBarPosition: 'bottom', 
    initialRouteName: 'Tab2', 
    tabBarOptions: { 
     activeTintColor: 'blue', 
     inactiveTintColor: 'grey', 
    }, 
    }, 
); 

詳細は出力