问题描述
我遇到useValue
和interpolateColor
和onScrollEvent
的错误!
我检查了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
字条。可能想稍后再尝试使用它代替onScrollEvent
。 useScrollEvent
在哪里找到?
使用backgroundColor的style
也出现错误:
...
const backgroundColor = interpolateColor(x,"#5499C7"]
})
...
<Animated.View style={[styles.slider,{ backgroundColor}]}>
即单词样式用红色下划线
。我使用普通颜色,错误消失了:
<Animated.View style={[styles.slider,{ backgroundColor: 'cyan'}]}>
谢谢!
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)