2017-04-20 23 views
6

Tôi có một FlatList với một chức năng OnScroll trông như thế này:Phản ứng Native Android FlatList OnScroll Animation

<Animated.View style={{ transform: [{translateX: this.state.scrollX}] }}> 
    <FlatList 
    data={ reactionGroup.reactions } 
    keyExtractor={ (i) => i.id + uuid.v4() } 
    renderItem={ this._renderItem } 
    horizontal={ true } 
    scrollEventThrottle={1} 
    onScroll={ reactionGroup.reactions.length > 1 ? this.onScroll : null } 
    showsHorizontalScrollIndicator={ false } /> 
</Animated.View> 

onScroll(event) { 
    const { timing } = Animated 
    if (event.nativeEvent.contentOffset.x > 0) { 
    timing(
     this.state.scrollX, 
     { toValue: -60, duration: 100, useNativeDriver: true } 
    ).start() 
    } else { 
    timing(
     this.state.scrollX, 
     { toValue: 0, duration: 100, useNativeDriver: true } 
    ).start() 
    } 
}, 

này hoạt động tốt trên iOS, nhưng đối với Android hoạt hình sẽ không bắt đầu cho đến khi FlatList đã ngừng di chuyển .

Về cơ bản, tôi chỉ khởi chạy hoạt ảnh khi người dùng cuộn và đặt lại khi họ quay lại phần đầu của cuộn ngang.

Có cách nào tốt hơn để xử lý việc này để nó hoạt động trên Android không?

Tôi cũng đã thử làm Animation.event bên trong onScroll, nhưng tôi không muốn gắn trực tiếp hoạt ảnh vào vị trí cuộn. Cách tiếp cận này cho phép Android hoạt động trong khi cuộn, nhưng nó khá là hốt hoảng.

RN: 0.43.3

Trả lời

Các vấn đề liên quan