我知道本机反应动画不支持“彩色”动画。我没有使用本地动画模块。并且Animated.View上的彩色动画完全可以正常工作。但是要抓住的是,一旦我触摸包裹了我的Animated.View的TouchableOpacity,或者如果我切换屏幕,我就会收到此错误。这是我组件的代码:
constructor(props){
super(props){
this.state = {
srcollY : new Animated.Value(0)
}
}
}
renderSearchBar(){
const searchBarWidth = this.state.scrollY.interpolate({
//some range
});
const colorSearchBar = this.state.scrollY.interpolate({
//some range
});
return (
<View style={[styles.searchBarOuterContainer, { marginTop: moderateScale(searchBarMargin) }]}>
<TouchableOpacity style={{ height: "100%", width: '90%', transform: [{ scaleX: searchBarWidth }] }} onPress={() => alert("open hotel")}>
<Animated.View elevation={5} style={[styles.searchBarInnerContainer,{backgroundColor:colorSearchBar}]}>
<Text style={styles.placeholderContainer}>
//some text
</Text>
<View style={styles.searchIconContainer}>
<Image
source={constants.SEARCH_ICON}
style={styles.searchIcon}
onTouchStart={() => console.log("po")}
/>
</View>
</Animated.View>
</TouchableOpacity>
</View>
);
}
render() {
return (
<Animated.View style={styles.container} onLayout={(e) => this.setScreenHeight(e)}>
<ScrollView onScroll={
Animated.event(
[{ nativeEvent: { contentOffset: { y: this.state.scrollY } } }],
)}
scrollEventThrottle={16}
stickyHeaderIndices={[1]}
>
{this.renderSomething1()}
{this.renderSearchBar()}
{this.renderSomething2()}
</ScrollView>
</Animated.View>
);
}
我要实现的是屏幕中间的搜索栏,该搜索栏具有一些半透明的颜色,并且不覆盖全屏宽度,当滚动视图时,搜索栏会以全屏宽度和不透明颜色停留在顶部。 动画完全可以按照我想要的方式完美播放。但是只要我点击ToucableOpacity我就会收到错误消息:
backgroundColor is not supported by native animation module
当我消除该错误并再次点击touchableOpacity时,其onPress()上的警报就可以正常工作。如果我从此屏幕移到另一个屏幕,然后再次返回,也会发生同样的事情。
当我不使用本机动画模块时,我不明白为什么会出现此错误。即使useNativeDriver is false
的默认值我仍然尝试显式定义为false,但无济于事。