我正在尝试使用createAnimatedComponent() api
创建一个动画FlatList组件。我正在使用此Animated FlatList隐藏/显示标题。
这是我的FlatList的样子。
class PageList extends React.Component {
render() {
console.log(this.props);
return (
<FL
refreshing={false}
onRefresh={null}
data={[
{ key: 'a', data },
{ key: 'b', data },
{ key: 'c', data },
{ key: 'd', data },
{ key: 'e', data },
{ key: 'f', data },
{ key: 'g', data },
{ key: 'h', data },
]}
{...this.props}
renderItem={({ item }) => (
<Text style={{ fontSize: 36 }}>
{item.data}
</Text>
)}
/>
);
}
}
我正在从另一个组件向其传递onScroll属性。
AnimatedComponent = Animated.createAnimatedComponent(PageList);
const onScroll = Animated.event(
[{ nativeEvent: { contentOffset: { y: this.scroll } } }],
{ useNativeDriver: true },
);
<AnimatedPageList
showVertialScrollIndicator={false}
overScrollMode="always"
scrollEventThrottle={16}
onScroll={onScroll}
renderItem={({ item }) => <RepoItem item={item} />}
responderId={responderId}
/>
一切正常。我得到了预期的结果。但是当我通过onRefresh={() => {}}
作为PageList的道具时,它就中断了(它停止折叠和扩展导航栏)。
由于某些原因,当我通过onRefresh
道具时,AnimatedFlatList无法正常工作。