React Native Redash,TypeError:this.props.onScroll不是一个函数

问题描述

我遇到useValueinterpolateColoronScrollEvent错误! 我检查了docs in github,并发现自15.0.0版本以来,我们需要从v1导入上述内容,例如:

import { useValue } from 'react-native-redash/src/v1/Hooks'
import { interpolateColor } from 'react-native-redash/src/v1/Colors'
import { onScrollEvent } from 'react-native-redash/src/v1/Gesture'

现在开始时我没有任何错误,但是出现空白屏幕,如果尝试滚动,则会出现以下错误

TypeError: this.props.onScroll is not a function. (In 'this.props.onScroll(e)','this.props.onScroll' is an instance of AnimatedEvent)

进口货有问题吗?

其余代码为:

const { width } = Dimensions.get('window')
export interface OnboardingProps {

}

const styles = StyleSheet.create({
  container: {
    flex: 1,backgroundColor: 'white'

  },slider: {
    height: SLIDE_HEIGHT,borderBottomrighTradius: 75

  },footer: {
    flex: 1
  }
})

const Onboarding: React.SFC<OnboardingProps> = () => {
  const x = useValue(0)
  // Todo: useScrollEvent
  const onScroll = onScrollEvent({ x });
  const backgroundColor = interpolateColor(x,{
    inputRange: [0,width,width * 2,width * 3],outputRange: ["#2ECC71","#5DADE2","#82E0AA","#5499C7"]
  })
  return (
    <View style={styles.container}>
      <Animated.View style={[styles.slider,{ backgroundColor }]}>
        <Animated.ScrollView horizontal snapToInterval={width}
          decelerationRate='fast' showsHorizontalScrollIndicator={false}
          bounces={false}
          {...{ onScroll }}
        >
          <Slide label='Relaxed' />
          <Slide label='Playful' right />
          <Slide label='Exentric' />
          <Slide label='Funky' right />
        </Animated.ScrollView>
      </Animated.View>
      <View style={styles.footer} >
        <Animated.View style={{ ...StyleSheet.absoluteFillObject,backgroundColor }} >
          <View style={{ flex: 1,backgroundColor: 'white',borderTopLefTradius: 75 }} ></View>
        </Animated.View>
      </View>
    </View>

  );
}

讲师(William Candillon)有Todo: useScrollEvent字条。可能想稍后再尝试使用它代替onScrollEventuseScrollEvent在哪里找到?

使用backgroundColor的style也出现错误

...
 const backgroundColor = interpolateColor(x,"#5499C7"]
  })
...
<Animated.View style={[styles.slider,{ backgroundColor}]}>

即单词样式用红色下划线

我使用普通颜色,错误消失了:

<Animated.View style={[styles.slider,{ backgroundColor: 'cyan'}]}>

代码来自YouTube 有什么建议吗?

谢谢!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)