时间戳

首页 > 解决方案 > react-native-snap-carousel 教程如何使用它

react-native - react-native-snap-carousel 教程如何使用它

问题描述

我试图找到任何关于实现 react-native-snap-carousel 示例的教程，但我找不到任何教程。如果你们中有人看过这方面的任何教程，请建议一个链接。我已经阅读了它的创建者提供的文档和示例，但是对我来说它们看起来很复杂。

标签： react-nativecomponentscarouselswipereact-native-snap-carousel

解决方案

您必须提供数据，它会自动映射并分配功能组件以呈现项目它将返回带有索引和项目的 json 格式，您可以在下面的示例中看到

const container = ({edges,_loadmore,navigation}) =>{
 const _renderItem = ({ item, index }) => {
 return (
    <View>
      <Render_component  />
    </View>
   );
};
    return (
     <Carousel
    onSnapToItem={slideIndex => {
      setcurrentSlider(slideIndex);
      _loadMore();
    }}
    onBeforeSnapToItem={slideIndex => {
      setBeforeSlider(slideIndex);
    }}
    inactiveSlideOpacity={1}
    inactiveSlideScale={1}
    enableSnap
    ref={carRef}
    data={edges}
    renderItem={_renderItem}
    sliderHeight={screenHeight}
    itemHeight={screenHeight}
    vertical={true}

    />
    )
}

推荐阅读