实现RN轮播（走马灯/Swiper/Carousel/Snap/Tab ）组件

[yaofly2012]

RN轮播（走马灯/Swiper/Carousel/Snap ）组件

ScrollView

实现

<ScrollView
  horizontal
  pagingEnabled
  nestedScrollEnabled
  showsHorizontalScrollIndicator={false}
  showsVerticalScrollIndicator={false}
  ref={scrollRef}
  >
  {childrens.map((child, index) => <View style={styles.childrenContainer} key={index}>{child}</View>)}
</ScrollView>

初始位置

如果初始展示非首帧，如何初始化ScrollView滚动位置呢？

contentOffset

Issues/Conern

1. Android （三星Galaxy Z Flip4 / Android 13）不行啊！！！
2. contentInset只有iOS才支持，为啥不直接用contentContainerStyle呢？

参考

1. Paginated Horizontal Scroll List In React Native
2. [Android] ScrollView is missing initial scroll position for Android #6849

改用FlatList

参考

1. RN ScrollView
2. Medium (React Native) Create a Horizontal Snap ScrollView
3. 第三方库

• react-native-snap-carousel
• react-native-reanimated-carousel
• react-native-swiper

[yaofly2012]

react-native-scrollable-tab-view

Navigation