主题
信息流滑动位 —— 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)
类成员
| 成员 | 说明 |
|---|---|
episodeNumber | number | 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> 组件属性
| 属性 | 类型 | 说明 |
|---|---|---|
ad | NovvyScrollAd | 广告实例(须先 ad.load()) |
durationSeconds | number | null | 划走解锁的等待时长(原生会 clamp 到最小值) |
useDefaultSwipeOverlay | boolean(默认 true) | 是否显示 SDK 内置「Swipe to skip」提示条;设为 false 可自行基于 onAdPlaybackTick 绘制 UI |
style | StyleProp<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 主线程 触发。