視差反應原生滑動

Question

有沒有一種方法可以將react-native-swiper與react-naitve-parallax-scroll-view結合使用 。 我想在視差滾動的前景組件中呈現滑動組件的分頁。 默認情況下，react native swiper的分頁位置固定，當我滾動時，分頁停留在屏幕上。 我想在向下滾動以隱藏時具有分頁的視差效果。 分頁應位於視差滾動視圖的renderForeground中。

<Swiper 
    showsButtons={false}
    loop={false}
    showsPagination={true}
 >

    <ParallaxScrollView
           backgroundColor="transparent"
           contentBackgroundColor="#fff"
           parallaxHeaderHeight={250}
           renderBackground={() => (
                <ImageBackground 
                                source={require('../assets/images/image1.png')}
                                style={{width: '100%', height: 250}}
                            />
                        )}
           renderForeground={() => (
                  <View style={{flex: 1,alignItems: 'center', justifyContent: 'flex-end' }}>
                      <Text>Hello world</Text>     
                   </View>
                    )}>

                   <View style={{ height: 500 }}>
                       <Text>Scroll me</Text>
                    </View>
       </ParallaxScrollView>  
       <ParallaxScrollView
           backgroundColor="transparent"
           contentBackgroundColor="#fff"
           parallaxHeaderHeight={250}
           renderBackground={() => (
                <ImageBackground 
                                source={require('../assets/images/image1.png')}
                                style={{width: '100%', height: 250}}
                            />
                        )}
           renderForeground={() => (
                  <View style={{flex: 1,alignItems: 'center', justifyContent: 'flex-end' }}>
                      <Text>Hello world</Text>     
                   </View>
                    )}>

                   <View style={{ height: 500 }}>
                       <Text>Scroll me</Text>
                    </View>
       </ParallaxScrollView>  
</Swiper>

我發現了react-native-pagination，但是不知道在這種情況下如何實現。

Answer 1

我想你應該用這個

https://github.com/archriss/react-native-snap-carousel

該轉盤在單個組件中同時提供了視差和整頁滑動器。 最好，對我有幫助

Answer 2

嘗試了兩個組件。 你想要這樣的東西。 https://snack.expo.io/r1NOE_q-Q