React native 不变冲突：不变冲突：outputRange不能包含#ffffff。（#ffffff，#aaa2d7，#aaa2d7）

即使我更改了，我也会得到这个错误：inputIndex==I？255:0到inputIndex==i？“#ffffff”：“#aaa2d7”

其目的是，当第一个选项卡处于活动状态时，标题颜色应为白色“#ffffff”，其他选项卡应为“#aaa2d7”

constinputrange=props.navigationState.routes.map（（x，i）=>i）；
返回(
{props.navigationState.routes.map（（路线，i）=>{
const color=Animated.color(
A.轮(
动画。插值（道具位置{
输入范围，
outputRange:inputRange.map（inputIndex=>
inputIndex==i？#ffffff:“#aaa2d7”
),
})
),
0,
0
);
返回(
{
//此.changetab（route.key）
this.setState（{index:i}）
}}>
{这个。_gettabaricon（route.key）}
{route.title.tolocalUpperCase（）}
);
})}
);
}

---

谢谢你

你可以试试这样的东西

const scrollY=新的动画值（0）；
const bgColor=动画。插值（滚动{
输入范围：[0，收割台高度]，
outputRange:[动画.color（56，180，113，0），动画.color（56，180，113，1）]
})

您可以尝试这样的方法

const scrollY=新的动画值（0）；
const bgColor=动画。插值（滚动{
输入范围：[0，收割台高度]，
outputRange:[动画.color（56，180，113，0），动画.color（56，180，113，1）]
})

您可能需要

outputRange

值的格式为

Animated.color（r，g，b）

而不是

“#RRGGBB”

@zaytrix谢谢您的帮助，我已经更改了outputRange:inputRange.map（inputIndex=>inputIndex==I？Animated.color（255，255）：Animated.color（170173）），目前没有错误，但仍然是活动选项卡红色和其他黑色，我想在rgb（170170173）上激活颜色选项卡白色和其他颜色。您可能需要

输出范围

值，格式为

Animated.color（r，g，b）

而不是

“\RRGGBB”

@zaytrix谢谢你的帮助，我已经按照你说的更改了outputRange:

outputRange:inputRange.map（inputIndex=>inputIndex==I？Animated.color（255、255、255）：Animated.color（170170170173））

，目前没有错误，但活动选项卡仍然是红色的，其他选项卡是黑色的，我想在rgb（170170173）上激活颜色标签白色和其他颜色

    const inputRange = props.navigationState.routes.map((x, i) => i);
    return (
      <View style={{backgroundColor: "#5243af",flexDirection: 'row', height: Metrics.HEIGHT * 0.1, elevation: 0}}> 
        { props.navigationState.routes.map((route, i) => {
          const color = Animated.color(
            Animated.round(
              Animated.interpolate(props.position, {
                inputRange,
                outputRange: inputRange.map(inputIndex =>
                  inputIndex === i ? "#ffffff" : "#aaa2d7"
                ),
              })
            ),
            0,
            0
          );
          return (
            <TouchableOpacity
              style={{flex: 1, alignItems: 'center', borderLeftColor: "#9a91d2", borderLeftWidth: 1/* , borderBottomWidth: 3, borderBottomColor "red" */}}
              key={i}
              onPress={() => {
                //this.changeTabs(route.key)
                this.setState({ index: i })
              }}>
              {this._getTabBarIcon(route.key)}
              <Animated.Text style={{ color, fontSize: Fonts.moderateScale(15), marginBottom: 10 }}>{route.title.toLocaleUpperCase()}</Animated.Text>
            </TouchableOpacity>
          );
        })}
      </View>
    );
  }