不变违规：不变违规：outputRange 不能包含#ffffff。（#ffffff，#aaa2d7，#aaa2d7）答案

【问题标题】：Invariant Violation: invariant violation: outputRange cannot include #ffffff. (#ffffff, #aaa2d7,#aaa2d7)不变违规：不变违规：outputRange 不能包含#ffffff。（#ffffff，#aaa2d7，#aaa2d7）
【发布时间】：2020-03-20 21:06:04
【问题描述】：

即使我更改，我也会收到此错误： inputIndex === i ？ 255: 0 到 inputIndex === i ？ “#ffffff”：“#aaa2d7”。

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

    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>
    );
  }

谢谢

【问题讨论】：

您可能需要outputRange 格式的值Animated.color(r, g, b) 而不是"#RRGGBB"
@zaytrix 谢谢你的帮助，我已经改变了你说的 outputRange：outputRange: inputRange.map(inputIndex => inputIndex === i ? Animated.color(255, 255, 255) : Animated.color(170,170,173) )，目前没有错误，但仍然是活动标签红色和其他黑色，我想活动颜色标签白色和其他人在 rgb(170, 170, 173)

标签： react-native react-native-tab-view react-native-reanimated

【解决方案1】：

你可以试试这样的。

const scrollY = new Animated.Value(0);

const bgColor = Animated.interpolate(scrollY, {
                inputRange: [0, HEADER_HEIGHT], 
                outputRange: [Animated.color(56, 180, 113, 0),                        Animated.color(56, 180, 113, 1)]
                })

【讨论】：