爲什麼圖標顏色不會根據選擇而改變？

我有一個滑動tabView有兩個選項卡。標題顏色會根據是否選中選項卡而更改。它在＃9B9B9B'（lightGrey）和未選中的＃666768'（darkGrey）之間彈動以供選擇。爲什麼圖標顏色不會根據選擇而改變？

我還在標題旁邊顯示一個圖標。我希望圖標顏色也根據選擇哪個選項卡進行更改。

由於某種原因，不會發生這種情況，並且無論選項卡是否被選中，圖標的顏色都會保持未選中狀態。

我該如何解決這個問題？我的代碼如下。謝謝。

_renderLabel = (props: any) => ({ route, index }) => { 
    const inputRange = props.navigationState.routes.map((x, i) => i); 
    const outputRange = inputRange.map(
     inputIndex => inputIndex === index ? '#666768' : '#9B9B9B'); 
    const color = props.position.interpolate({ 
     inputRange, 
     outputRange, 
    }); 

    return (
     <View style={styles.labelContainer}> 
     <FontAwesome 
      name={route.title === 'New' ? 'clock-o' : 'fire'} 
      size={14} 
      color={color === '#666768' ? '#666768' : '#9B9B9B'} 
     /> 
     <Animated.Text style={[styles.label, { color }]}> 
      {route.title} 
     </Animated.Text> 
     </View> 
    ); 
    };

來源

2016-12-30 bloppit

提供一個工作示例（的jsfiddle /片段） – Dekel

我該怎麼做才能做出反應？ – bloppit

對不起，沒有注意到你正在談論反應本土 – Dekel

原來我不得不把它改成這樣：

const AnimatedFontAwesome = Animated.createAnimatedComponent(FontAwesome); 

... 

<AnimatedFontAwesome 
    name={route.title === 'New' ? 'clock-o' : 'fire'} 
    size={14} 
    style={{ color }} 
/>

來源

2016-12-31 23:06:05 bloppit

在react（網絡），你會使用style，不color。我搜索了一下，並且我認爲它可能與react-native相同。

因此，而不是：

color={color === '#666768' ? '#666768' : '#9B9B9B'}

嘗試...

style={{ color: color === '#666768' ? '#666768' : '#9B9B9B' }}

來源

2016-12-31 00:39:57

不幸的是:( FontAwesome有一個道具稱爲顏色 – bloppit

爲什麼圖標顏色不會根據選擇而改變？

回答

相關問題