反应原生刷卡器奇怪的行为

Question

在我的应用程序中，我使用react-native-swipeper组件。最初它工作正常，但最近它有一种奇怪的行为。它有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与当前swipeper组件的props完全相同。并且进一步调用了刷卡器组件的 setState 和 initState，因此扫刀状态变得混乱。

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

---

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

Answer 2

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

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

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

Answer 3

loop={false} will solve this as i had the same issue

将循环设置为 true 时，滑动器组件中存在错误，因为必须有一个"开始幻灯片"道具