错误:“本机动画模块不支持'backgroudColor'”。不使用本机动画模块。 (iOS和Android)

时间:2020-05-21 06:23:23

标签: javascript react-native animation react-animated react-native-animatable

我知道本机反应动画不支持“彩色”动画。我没有使用本地动画模块。并且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,但无济于事。

0 个答案:

没有答案