React Native集成Appodeal Banner时出现“The specified child already has a parent. You must call removeView() on the child's parent first”错误的解决咨询

你好，我在生产环境把Appodeal Banner集成到React Native应用后，偶尔会碰到这个错误，但完全搞不清它的触发时机和原因。下面是我写的Banner组件代码，而且我在多个页面的return第一行直接调用这个组件：

import { useEffect, useState } from "react";
import { StyleSheet, View } from "react-native";
import { AppodealBanner } from "react-native-appodeal";

interface BannerAdComponentProps {
  style?: any;
  placement?: string;
}

const BannerAdComponent: React.FC<BannerAdComponentProps> = ({
  style,
  placement = "default",
}) => {
  return (
    <View style={[styles.adContainer, style]}>
      <AppodealBanner
        key={`appodeal-${placement}`}
        placement={placement}
        style={{ width: 320, height: 50 }}
        onAdLoaded={() => {}}
        onAdFailedToLoad={() => {}}
        onAdClicked={() => {}}
        onAdExpired={() => {}}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  adContainer: {
    width: "100%",
    alignItems: "center",
    justifyContent: "center",
  },
});

export default BannerAdComponent;

有没有大佬知道这个问题该怎么解决呀？

可能的解决方案（来自开发者经验分享） #

这个错误本质是同一个视图实例被重复添加到不同父容器，或者组件重新渲染时没有正确清理之前的Banner视图，针对你的代码，你可以试试这几个方案：

• 方案一：添加组件卸载时的Banner清理逻辑
  利用React的useEffect钩子监听组件卸载事件，调用Appodeal的销毁方法清理对应位置的Banner，同时给Banner的key增加时间戳，确保每次渲染都是全新的实例：

  import { useEffect, useState } from "react";
  import { StyleSheet, View } from "react-native";
  import { AppodealBanner, Appodeal } from "react-native-appodeal";
  
  interface BannerAdComponentProps {
    style?: any;
    placement?: string;
  }
  
  const BannerAdComponent: React.FC<BannerAdComponentProps> = ({
    style,
    placement = "default",
  }) => {
    useEffect(() => {
      // 组件卸载时销毁对应placement的Banner
      return () => {
        Appodeal.destroyBanner(placement);
      };
    }, [placement]);
  
    return (
      <View style={[styles.adContainer, style]}>
        <AppodealBanner
          key={`appodeal-${placement}-${Date.now()}`} // 时间戳确保key唯一
          placement={placement}
          style={{ width: 320, height: 50 }}
          onAdLoaded={() => {}}
          onAdFailedToLoad={() => {}}
          onAdClicked={() => {}}
          onAdExpired={() => {}}
        />
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    adContainer: {
      width: "100%",
      alignItems: "center",
      justifyContent: "center",
    },
  });
  
  export default BannerAdComponent;
  

• 方案二：给不同页面的Banner分配独立的placement
  如果你在多个页面都用了默认的default placement，很可能会导致Banner实例冲突。尝试给不同页面的Banner指定专属的placement名称，比如首页用home_banner，详情页用detail_banner，这样每个Banner都是独立的实例，能有效减少冲突概率。

• 方案三：用状态控制Banner的延迟渲染
  先让组件完成挂载，再渲染Banner，避免初始化阶段的视图重复添加问题：

  const BannerAdComponent: React.FC<BannerAdComponentProps> = ({
    style,
    placement = "default",
  }) => {
    const [isReady, setIsReady] = useState(false);
  
    useEffect(() => {
      setIsReady(true);
      return () => {
        Appodeal.destroyBanner(placement);
      };
    }, [placement]);
  
    // 组件未准备好时不渲染Banner
    if (!isReady) return null;
  
    return (
      <View style={[styles.adContainer, style]}>
        <AppodealBanner
          key={`appodeal-${placement}`}
          placement={placement}
          style={{ width: 320, height: 50 }}
          onAdLoaded={() => {}}
          onAdFailedToLoad={() => {}}
          onAdClicked={() => {}}
          onAdExpired={() => {}}
        />
      </View>
    );
  };
  

备注：内容来源于stack exchange，提问作者narendra balaga