Реагировать на родного свайпера с параллаксом
Есть ли способ объединить реакцию-родной-swiper с реакцией-naitve-parallax-scroll-view. Я хочу сделать пагинацию компонента 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>
Я нашел реакцию-нативную нумерацию страниц, но не знаю, как реализовать в этом случае.
2 ответа
Я думаю, что вы должны использовать это
https://github.com/archriss/react-native-snap-carousel
эта карусель обеспечивает как параллакс, так и Swiper полной страницы в одном компоненте. это лучше, это поможет мне
Пробовал с обоими компонентами. Вы хотите что-то вроде этого. https://snack.expo.io/r1NOE_q-Q