Question

在我的应用程序中，我使用react-native-swiper组件。最初它运作正常，但最近它有一个奇怪的行为。它有5个窗口，它像这样滑动。 5-1-2-3-4-5-1

它刷了7次，物品是这样的。从第一个开始。我可以向左滑动一次。向右滑动5次。就这样。

我该如何解决这个问题？我使用1.5.6版本

import React from "react";
import { Dimensions } from "react-native";
import Swiper from "react-native-swiper";
import SwiperWindow from "../SwiperWindow/SwiperWindow";

const height = Dimensions.get("window").height * 0.3;

const swiperContainer = props => (
  <Swiper height={height} 
    showsButtons={true}
    showsPagination={false}>

    {props.featuredWorkouts.map(featuredWorkout => {
      return(
      <SwiperWindow
        key={featuredWorkout.featuredWorkoutId}
        imageSource={featuredWorkout.postImage}
        workoutTitle={featuredWorkout.title}
      />)
    })}
  </Swiper>
);

export default swiperContainer;

Answer 1

在此线程中， https://github.com/leecade/react-native-swiper/issues/569，

看来这个问题可以解决，

我观察到，如果在父组件中调用setState，则会触发刷卡组件的componentWillReceiveProps，并且nextProps与当前刷卡组件的props完全相同。进一步调用了swiper组件的setState和initState，因此，swiper状态变得混乱。

如果（nextProps.index === this.props.index）返回，我会暂时添加；在componentWillReceiveProps中可以解决此问题。

此解决方案由HuiSF在此线程中提供。

Answer 2

添加key={allPins.length}。在 Swiper 中，如下所示，它对我有用

<Swiperkey={allPins.length}}>
</Swiper>

allPins.length 这里只是 dynamicArray.length。

react-native-swiper奇怪的行为

2 个答案: