微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

如何解决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 举报,一经查实,本站将立刻删除。