[英]React native swiper with parallax
Is there a way to combine the react-native-swiper with the react-naitve-parallax-scroll-view . 有没有一种方法可以将react-native-swiper与react-naitve-parallax-scroll-view结合使用 。 I want to render pagination of swiper component in foreground component of parallax scroll.
我想在视差滚动的前景组件中呈现滑动组件的分页。 By default pagination of react native swiper have fixed position and when I scroll pagination stays on screen.
默认情况下,react native swiper的分页位置固定,当我滚动时,分页停留在屏幕上。 I want to have parallax effect with pagination when scroll down to hide it.
我想在向下滚动以隐藏时具有分页的视差效果。 Pagination should be in renderForeground of parallax scroll view.
分页应位于视差滚动视图的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>
I found react-native-pagination but don't know how implement with this case. 我发现了react-native-pagination,但是不知道在这种情况下如何实现。
I think you should use this 我想你应该用这个
https://github.com/archriss/react-native-snap-carousel https://github.com/archriss/react-native-snap-carousel
this carousel provides the both Parallax and full page Swiper in a single component . 该转盘在单个组件中同时提供了视差和整页滑动器。 it is best , its help me
最好,对我有帮助
Tried with both the component. 尝试了两个组件。 You want something like this.
你想要这样的东西。 https://snack.expo.io/r1NOE_q-Q
https://snack.expo.io/r1NOE_q-Q
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.