与 react-native-snap-carousel 中的水平滚动相关的问题答案

【问题标题】：Issue related to horizontal scroll in react-native-snap-carousel与 react-native-snap-carousel 中的水平滚动相关的问题
【发布时间】：2020-02-17 13:28:18
【问题描述】：

我正在使用 react-native-snap-carousel 模块中的轮播从远程 URL 水平滚动图像。它在 android 中运行良好，但在 iOS 的情况下，有时图像会滚动，大多数情况下不会。

它正在检测我的滑动动作，但图像没有滚动。

我在 iOS 13.1.3、react-native 0.59.8、react-native-snap-carousel 3.8.2 上试用过

以下代码用于轮播

   <Carousel
            borderTopRightRadius={2}
            borderTopLeftRadius={2}
            ref={c => (this._ref = c)}
            data={images}
            renderItem={item => this.renderItem(item)}
            onSnapToItem={index => {
              this.setState({ currentImage: index });
              onSliderMove(index);
            }}
            layout={"default"}
            sliderWidth={parentWidth || width}
            itemWidth={parentWidth || width}
            loop={circleLoop || false}
            contentContainerCustomStyle={{}}
            scrollEnabled={scrollable}
            onStartShouldSetResponderCapture={() => {
              return scrollable;
            }}
            onMoveShouldSetResponderCapture={() => {
              return scrollable;
            }}
            layoutCardOffset={20}
          />

我正在使用自定义组件来加载图像。

     renderItem = ({ item, index }) => {
      return (
        <View style={{ width, height }}>
          <LoadableImage
            url={item}
            index={index}
          />
        </View>
       )
      }

预期结果：水平滚动应该可以在 iOS 上流畅运行。实际结果：水平滚动大部分时间都不起作用。

帮我解决这个问题

【问题讨论】：

标签： react-native-snap-carousel

【解决方案1】：

我也遇到了这个轮播的滚动问题。我查看了库并尝试了以下属性。您可以在添加给定属性后尝试，它们使滚动平滑。使用以下属性后，我没有遇到任何问题。

试试最后两个属性。

<Carousel
      ref={isCarousel}
      data={options}
      renderItem={renderItem}
      sliderWidth={SLIDER_WIDTH}
      itemWidth={itemWidth || ITEM_WIDTH}
      useScrollView
      activeSlideAlignment="start"
      inactiveSlideScale={1}
      inactiveSlideOpacity={1} 
     onSnapToItem={(index) => {console.log(index); setIndex(index)}}
     *enableMomentum={true}
     decelerationRate={0.9}*
   />

【讨论】：