为什么图标颜色不会根据选择而改变？

我有一个滑动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

为什么图标颜色不会根据选择而改变？

回答

相关问题