[英]React native swiper with parallax
有没有一种方法可以将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,但是不知道在这种情况下如何实现。
尝试了两个组件。 你想要这样的东西。 https://snack.expo.io/r1NOE_q-Q
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.