使用react-native-deck-swiper时遇componentWillUnmountAfterInteractions未找到错误

使用react-native-deck-swiper组件时，页面卸载触发如下错误：

ReferenceError: Can't find variable componentWillUnmountAfterInteractions

错误调用栈：

in Swiper (created by Card)
    in Card (created by Home)
    in RCTView (created by View)
    in View (created by Home)
    in Home (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by SceneView)
    in RCTView (created by View)
    in View (created by DebugContainer)
    in DebugContainer (created by MaybeNestedStack)

我的组件代码：

import { View, Text, Image, StyleSheet, Pressable } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import Swiper from "react-native-deck-swiper";
import { useEffect, useRef, useState } from "react";
import { db } from "../firebase";
import { getDocs, collection, onSnapshot } from "firebase/firestore";

export default function Card() {
  const cardRef = useRef();
  const [counter, setcounter] = useState(0);
  const userref = collection(db, "users");
  const [profiles, setprofiles] = useState([]);

  useEffect(() => {
    getDocs(userref).then((result) => {
      for (let item of result.docs) {
        setprofiles((p) => [...p, item.data()]);
      }
    });
  }, []);
  
  return (
    <>
      <Swiper
        ref={cardRef}
        cards={profiles}
        onSwipedLeft={() => {
          setcounter((p) => ++p);
        }}
        onSwipedRight={() => {
          setcounter((p) => ++p);
        }}
        stackSize={2}
        cardIndex={0}
        containerStyle={{
          backgroundColor: "transparent",
        }}
        verticalSwipe={false}
        renderCard={(card) => {
          return card ? (
            <View style={styles.outerContainer}>
              <View style={styles.innerContainer}>
                <View style={styles.imgContainer}>
                  <Image
                    source={{
                      uri: card.url,
                    }}
                    style={styles.img}
                  />
                </View>
                <View style={styles.lowermodal}>
                  <View style={styles.upperText}>
                    <Text style={{ fontSize: 30, fontWeight: "bold" }}>
                      {card.name}
                    </Text>
                    <Text style={{ fontSize: 20, fontWeight: "bold" }}>
                      {card.occupation}
                    </Text>
                  </View>
                  <View style={styles.lowerText}>
                    <Text style={{ fontSize: 23, fontWeight: "bold" }}>48</Text>
                  </View>
                </View>
              </View>
            </View>
          ) : (
            <View style={styles.outerContainer}>
              <View
                style={[styles.innerContainer, { backgroundColor: "grey" }]}
              >
                <Text style={{ fontSize: 40 }}>No Profiles</Text>
              </View>
            </View>
          );
        }}
      />
    </>
  );
}

const styles = StyleSheet.create({
  outerContainer: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  innerContainer: {
    width: 350,
    height: 500,
    borderRadius: 10,
    overflow: "hidden",
  },
  imgContainer: {
    flex: 3,
  },
  img: {
    width: "100%",
    height: "100%",
  },
  lowermodal: {
    flex: 1,
    backgroundColor: "white",
    padding: 20,
    justifyContent: "space-between",
  },
  upperText: {
    gap: 5,
  },
  lowerText: {
    alignItems: "flex-end",
  },
});

解决办法 #

这个错误源于react-native-deck-swiper内部使用了React Native已移除的componentWillUnmountAfterInteractions生命周期方法，属于版本不兼容问题，可尝试以下方案：

• 调整组件版本：
  执行npm install react-native-deck-swiper@latest升级组件到最新版，或查找与当前React Native版本匹配的旧版本安装。

• 临时修复源码：
  找到node_modules/react-native-deck-swiper/src/Swiper.js，将其中的componentWillUnmountAfterInteractions替换为标准的componentWillUnmount方法。

• 手动清理实例：
  在组件卸载前通过ref调用清理逻辑，添加如下useEffect：

  useEffect(() => {
    return () => {
      if (cardRef.current) {
        cardRef.current._removePanResponder?.();
        cardRef.current._animation?.stop();
      }
    };
  }, []);
  

• 替换替代组件：
  若上述方法无效，可改用react-native-swiper-flatlist等功能类似的组件。

内容的提问来源于stack exchange，提问作者Nouman Khan