react-native - react-native-swiper 奇怪的行为

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，swiper 组件的 componentWillReceiveProps 会被触发，并且 nextProps 与当前 swiper 组件的 props 完全相同。并且进一步调用了 swiper 组件的 setState 和 initState，因此 swiper 状态变得混乱。

我临时添加了 if (nextProps.index === this.props.index) return; 在 componentWillReceiveProps 中解决这个问题。

---

这个解决方案是由 HuiSF 在这个线程中提供的。

Answer 2

添加key={allPins.length}. 在如下的 Swiper 内部，它对我有用

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

allPins.length这里不过是dynamicArray.length。