0

有没有办法将react-native-swiperreact-naitve-parallax-scroll-view结合起来。我想在视差滚动的前景组件中呈现 swiper 组件的分页。默认情况下,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但不知道如何在这种情况下实现。

4

2 回答 2

0

我认为你应该使用这个

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

此轮播在单个组件中提供视差和整页 Swiper。这是最好的,它帮助我

于 2018-08-01T05:04:57.550 回答
-1

尝试使用这两个组件。你想要这样的东西。 https://snack.expo.io/r1NOE_q-Q

于 2018-06-22T13:08:16.803 回答