# React Native 的横幅集成

> 使用 LevelPlay SDK 在 React 本地 app程序中实现横幅广告服务，包括设置、初始化和监听器配置。

横幅是由系统启动的矩形广告服务，可以是静态广告，也可以是动画广告，并在实时 app 内容周围的指定区域提供。 

> **Note:**
>
> 本文档与 SDK 8.4.0+ 相关。

## 先决条件##prerequisites

* 确保已将 LevelPlay React 原生 SDK 正确集成到 app 中。[此处](/grow/levelplay/sdk/react/plugin-integration.md)概述了集成。
* 确保使用 LevelPlay Initialization API 初始化 SDK。
* 在 LevelPlay 后台中找到 AdUnitID。

## 创建横幅广告对象并设置大小##create-banner-ad-object-and-set-size

横幅广告对象的创建应在接收 **onInitSuccess** 回调后完成。

```js
import {
  LevelPlayBannerAdView、
  LevelPlayAdSize,
  type LevelPlayBannerAdViewMethods、
  type LevelPlayBannerAdViewListener，
} 来自“Unity LevelPlay-mediation”

const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const adSize = LevelPlayAdSize.BANNER; // or await LevelPlayAdSize.createAdaptiveAdSize() for adaptive
const listener = { /* LevelPlayBannerAdViewListener */ };
const loadAd = useCallback(() => {
    bannerAdViewRef.current?.loadAd();
}, []);
return (
    <LevelPlayBannerAdView
        ref={bannerAdViewRef}
        adUnitId="YOUR_AD_UNIT_ID"
        adSize={adSize}
        placementName="YOUR_PLACEMENT"
        listener={listener}
        style={ width: adSize.width, height: adSize.height }}
    />
);
```

### 横幅大小##banner-sizes

| LevelPlayAdSize | 描述                        | Dimensions in dp（Width X Height） |
| --------------- | ------------------------- | -------------------------------- |
| BANNER          | 标准横幅                      | 320 x 50                         |
| 大型              | 大型横幅                      | 320 x 90                         |
| 中矩形             | 中等矩形 (MREC)               | 300 x 250                        |
| 自适应             | 自动渲染广告服务以调整移动端和平板电脑的大小和方向 | 设备宽度 X 建议高度                      |

要创建广告大小，请遵循以下选项之一：

\*\*适应屏幕宽度的自适应广告大小（推荐）：\*\*此选项取代了“SMART”集成，因为它将根据设备类型返回横幅或 LEADERBOARD。支持自适应功能的网络（Google、Yandex）将根据其优化逻辑返回高度。

```js
let adSize = await LevelPlayAdSize.createAdaptiveAdSize();
```

\*\*使用固定宽度广告大小的自适应广告大小：\*\*此选项允许您设置指定的宽度。支持自适应横幅功能的网络（Google、Yandex）将根据提供的宽度根据其优化逻辑返回高度。所有其他网络将根据提供的宽度返回回退大小（横幅或 LEADERBOARD）。

```js
let adSize = await LevelPlayAdSize.createAdaptiveAdSize(400);
```

\*\*指定的横幅大小：\*\*此选项允许您专门设置横幅大小：横幅、大横幅、中等横幅。

```js
let adSize = LevelPlayAdSize.MEDIUM_RECTANGLE;
```

### 广告位##placements

我们支持在横幅广告中[放置](/grow/levelplay/platform/settings/placements.md)仅用于举报。应在 **loadAd** 之前设置广告位，以影响所有重新加载的广告服务。

## 设置横幅监听器##set-banner-listener

在代码中实现 **LevelPlayBannerAdViewListener** 以获取广告投放信息。

* 建议在加载横幅广告之前设置监听器。
* 每个横幅广告都应有自己的监听器实现。
* 回调在主线程上运行。

```js
const 监听器：LevelPlayBannerAdViewListener = {
    onAdLoaded：（adInfo：LevelPlayAdInfo) => {
      // Invoked each time a banner was loaded.刷新时或手动加载。
    },
    onAdLoadFailed：（报错：LevelPlayAdError) => {
     // Invoked when the banner loading process has failed.
     // This callback will be sent both for manual load and refreshed banner failures.
    },
    onAdDisplayed：（adInfo：LevelPlayAdInfo) => {
     // Notifies the screen is displayed.
    },
    onAdDisplayFailed：（adInfo：LevelPlayAdInfo，报错：LevelPlayAdError) => {
     // Notifies the screen failed to display.
    },
    onAdClicked：（adInfo：LevelPlayAdInfo) => {
     // Invoked when end user clicks on the banner ad.
    },
    onAdExpanded：（adInfo：LevelPlayAdInfo) => {
     // Ad is opened on full screen
    },
    onAdCollapsed：（adInfo：LevelPlayAdInfo) => {
     // Ad is restored to its original size
    },
    onAdLeftApplication：（adInfo：LevelPlayAdInfo) => {
     // Invoked when the user left the app.
    },
};
```

## 加载横幅广告##load-banner-ad

要加载横幅广告，请使用 **loadAd**。

```js
// Load the banner ad
bannerAdViewRef.current?.loadAd();
```

## 暂停和恢复横幅刷新##pause-and-resume-banner-refresh

如果在平台中定义了刷新值，则可以在代码中暂停横幅刷新。使用以下方法可停止横幅广告的自动刷新，或在暂停后重新启用。 

> **Note:**
>
> 再次显示横幅时，它将完成从暂停时间到刷新的时间。 

* **pauseAutoRefresh** – 暂停横幅广告的自动刷新。
* **resumeAutoRefresh** – 暂停横幅广告后恢复自动刷新。

```js
// Pause refresh 
bannerAdViewRef.current?.pauseAutoRefresh(); 
// Resume refresh
bannerAdViewRef.current?.resumeAutoRefresh();
```

## 销毁横幅广告##destroy-banner-ad

要销毁横幅，请调用 **destroy** 方法。

已销毁的横幅无法再次显示。要显示更多广告服务，请创建一个新的 **LevelPlayBannerAdView** 对象。 

```js
bannerAdViewRef.current?.destroy();
```

## 横幅广告服务的完整实现示例##full-implementation-example-of-banner-ads

以下是使用标准横幅大小创建和加载横幅广告的示例。

```js
import {
  LevelPlayBannerAdView、
  LevelPlayAdSize,
  type LevelPlayBannerAdViewMethods、
  type LevelPlayBannerAdViewListener，
  type LevelPlayAdInfo、
  type LevelPlayAdError、
} 来自“Unity LevelPlay-mediation”

// Start of some component ...
const bannerAdViewRef = useRef<LevelPlayBannerAdViewMethods>(null);
const adSize = LevelPlayAdSize.BANNER
const 监听器：LevelPlayBannerAdViewListener = {
    onAdLoaded：（adInfo：LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLoadFailed：（报错：LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdDisplayed：（adInfo：LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdDisplayFailed：（adInfo：LevelPlayAdInfo，报错：LevelPlayAdError) => {
        // Implement your logic here
    },
    onAdClicked：（adInfo：LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdExpanded：（adInfo：LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdCollapsed：（adInfo：LevelPlayAdInfo) => {
        // Implement your logic here
    },
    onAdLeftApplication：（adInfo：LevelPlayAdInfo) => {
        // Implement your logic here
    },
};
return (
    <LevelPlayBannerAdView 
        ref={bannerAdViewRef}
        adUnitId={'YOUR_AD_UNIT_ID'}
        adSize={adSize}
        placementName={'YOUR_PLACEMENT'}
        listener={listener}
        onLayout={(_) => bannerAdViewRef.current?.loadAd()}
        style={width: adSize.width, height: adSize.height} // 获取实际横幅布局大小
      />
);
  
// End of component ...
```

## LevelPlay Mediation 演示应用程序##levelplay-mediation-demo-app

Integration Demo 应用程序演示如何在 app 中集成横幅广告单元 API。

[下载 React Native demo 应用程序](https://github.com/ironsource-mobile/react-native-SDK/tree/master/example)

验证您与我们的[集成测试套件](/grow/levelplay/sdk/react/integration-test-suite.md)的集成。

## 后续步骤##next-steps

请遵循我们的集成指南来集成其他聚合网络或配置其他广告格式：

* [添加聚合网络](/grow/levelplay/sdk/react/mediation-networks.md)
* [奖励广告服务](/grow/levelplay/sdk/react/rewarded-ads-integration.md)
* [插页式广告服务](/grow/levelplay/sdk/react/interstitial-integration.md)
* [原生广告服务](/grow/levelplay/sdk/react/native-ads-integration.md)