react-native - 不变违规:不变违规:outputRange 不能包含#ffffff。(#ffffff,#aaa2d7,#aaa2d7)
问题描述
即使我更改,我也会收到此错误: 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>
);
}
谢谢你
解决方案
你可以尝试这样的事情。
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)]
})
推荐阅读
- powershell - 在 Sharepoint、Onedrive 或 Dropbox 上将数据发布到 CSV
- cypress - 使用 Cypress 处理 Excel 文件:“路径”参数必须是字符串类型或 Buffer 或 URL 的实例
- nuxt.js - 为什么 Google 增强型电子商务添加到购物车就像点击一样?
- dll - CMD 无法在 AMD 64 位平台上加载 IA 32 位 .dll
- azure - 我可以升级到新的 ARM 模板架构吗?
- jquery - 如何在 textarea 中删除第三方链接?
- unicode - 无法在 message_payload 中发送 unicode 短信
- selenium - 当我尝试在不同 VM 的不同浏览器中进行并行执行时,我们收到错误“元素未附加到页面文档”
- javascript - 使用节点上传后图像未显示在浏览器中
- javascript - (Chrome/Opera/Etc)扩展:通过上下文菜单访问 *ALL* 可编辑对象中的文本(不仅仅是文本的选定/突出显示部分)?