Skip to content

信息流滑动位 —— NovvyScrollAd ​

内联信息流广告,渲染为原生视图插入可滚动列表。生命周期:load() → 嵌入 <NovvyScrollAdView> → setPlaying(true/false) 驱动播放 → destroy()。

可选 episodeNumber 覆盖该广告归属的集号(如第 1 集播放时预载第 2 集的广告);非空时优先于 setContentContext 的 episode。

对接流程 ​

本集开始播放
        ↓
NovvyAds.setContentContext(...)                 // series/episode
        ↓
new NovvyScrollAd(adUnitId, episodeNumber?) + load()
        ↓
onAdLoaded                                      // 就绪(或 onAdFailedToLoad)
        ↓
嵌入 <NovvyScrollAdView>(视图就绪时内部自动 attach)
        ↓
划入 setPlaying(true) → onAdShowed / 划走 setPlaying(false)
        ↓
组件卸载自动 detach(不 destroy)
        ↓
宿主手动 ad.destroy()                           // 释放原生实例 / 素材

构造函数:new NovvyScrollAd(adUnitId: string, episodeNumber?: number | null)

类成员 ​

成员说明
episodeNumbernumber | null | undefined,构造参数,覆盖 bid 请求中的集号
onAdShowed() => void,广告进入视口可见
onAdHidden() => void,广告移出视口 / 隐藏
onAdPlaybackTick(remainingSeconds: number) => void,每秒回调剩余锁定秒数(0 = 可划走)
load()预加载广告
setPlaying(playing: boolean)划入视口 true、划出 false;可在 attach 之前调用,意图会被缓冲并在挂载后应用
attach(durationSeconds?, useDefaultSwipeOverlay?)挂载到平台视图容器(通常由 <NovvyScrollAdView> 自动调用,宿主一般无需手动调用)
detach()从容器移除(通常由组件卸载时自动调用)
destroy()释放原生实例

加载与挂载的时序:原生 SCROLL 契约要求 load() 就绪先于 attach(),且早于就绪的 attach 会被静默丢弃且不重试。SDK 内部已处理此时序 —— 仅当「加载完成」与「视图就绪」两个信号都到达后才真正 attach,宿主无需关心。

<NovvyScrollAdView> 组件属性 ​

属性类型说明
adNovvyScrollAd广告实例(须先 ad.load())
durationSecondsnumber | null划走解锁的等待时长(原生会 clamp 到最小值)
useDefaultSwipeOverlayboolean(默认 true)是否显示 SDK 内置「Swipe to skip」提示条;设为 false 可自行基于 onAdPlaybackTick 绘制 UI
styleStyleProp<ViewStyle>容器样式

示例 ​

tsx
const ad = useMemo(() => new NovvyScrollAd('your_ad_unit_id', /* episodeNumber */ 2), []);

useEffect(() => {
  ad.onAdLoaded = () => ad.setPlaying(true);          // 当前 item 在视口内
  ad.onAdHidden = () => { /* 隐藏 */ };
  ad.onAdPlaybackTick = (remaining) => { /* 更新自定义倒计时 UI */ };
  ad.onAdFailedToLoad = (e) => ad.destroy();
  ad.load();
  return () => ad.destroy();                          // 组件销毁时释放
}, [ad]);

// 尺寸由宿主决定:短剧信息流通常是整屏竖版,让广告填满当前条目即可。
<NovvyScrollAdView ad={ad} durationSeconds={5} useDefaultSwipeOverlay style={{ flex: 1 }} />

// 根据视口可见性切换播放:
// ad.setPlaying(true)  // 滑入
// ad.setPlaying(false) // 滑出

<NovvyScrollAdView> 在原生视图就绪时自动 attach、在组件卸载时自动 detach。宿主仍需在广告结束后调用 ad.destroy() 释放实例。

⚠️ 尺寸由宿主决定:组件自身不带固有高度,请通过 style(或外层容器)给它明确的尺寸。短剧信息流一般让它填满整屏条目(如整屏分页列表里的 flex: 1)。

⚠️ 关于列表虚拟化:RN 的 FlatList / FlashList 会在 item 移出渲染窗口时卸载组件,从而触发 detach();滑回时重新挂载并 re-attach(原生实例在 detach 后仍存活,会 re-attach 恢复)。如需减少滑动过程中的重挂载,可调大列表的 windowSize。

事件回调 ​

除基类回调 onAdLoaded / onAdFailedToLoad 外,本类型的独有回调:

回调触发时机
onAdShowed广告已挂载展示(不代表曝光已上报,见回调与曝光)
onAdHidden广告从容器移除 / 隐藏
onAdPlaybackTick(remainingSeconds)每秒回调剩余锁定秒数

onAdFailedToLoad(error) 的 error 取值见错误类型。回调统一在 JS 主线程 触发。

本文档仅供技术对接使用,请勿外传。