React Native 在 FlashList 中缓慢加载 BannerAd

Question

我正在使用 @shopify lash-list (v1.6.3) 包来呈现不同的帖子，并且每个 x 项目都应该是 BannerAd (react-native-google-mobile-ads v13.2.0)。

如果用户滚动广告，则需要很长时间才能加载良好，大约需要 3-4 秒，但对于 Feed 来说，速度太慢了。有没有办法预加载这些横幅广告？此外，如果用户向上滚动到之前的 BannerAd，如果组件重新渲染，他将获得一个新的广告。

import {FlashList} from "@shopify/flash-list";
import {BannerAd, BannerAdSize, TestIds} from 'react-native-google-mobile-ads';


<FlashList data={postList}
       renderItem={(item: any) => {
         if (item.item.ad) {
           return <View className="my-2 h-[300px] rounded-xl flex justify-center items-center">
             <BannerAd key={item.item.id}
                       unitId={TestIds.BANNER}
                       size={BannerAdSize.ANCHORED_ADAPTIVE_BANNER}
             />
           </View>
         }
         return <Post item={item.item}/>;
       }}
       keyExtractor={(item: any) => item.id}
       numColumns={1}
       estimatedItemSize={300}
       refreshing={isFetching}
       refreshControl={refreshControl}
       onEndReached={loadMore}
       onEndReachedThreshold={0.3}
/>

Answer 1

我认为你需要减少estimatedItemSize，尝试将estimatedItemSize设置为180或其他

或

你可以给出具体的高度和宽度

estimatedListSize={{
        height: Dimensions.get('screen').height,  // adjust according to need
        width: Dimensions.get('screen').width,
      }}