---
metadata:
  - name: generator
    content: Diplodoc Platform v5.52.0
alternate:
  - https://ads.yandex.com/helpcenter/en/easy/integration/react-native/formats/banner.md
  - https://ads.yandex.com/helpcenter/ru/easy/integration/react-native/formats/banner.md
  - https://ads.yandex.com/helpcenter/zh/easy/integration/react-native/formats/banner.md
  - href: zh/easy/integration/react-native/formats/banner.md
    type: text/markdown
    title: Markdown version
  - href: ../llms.txt
    type: text/markdown
    title: llms.txt
---
> **Documentation Index:** Fetch the complete configuration index at https://ads.yandex.com/helpcenter/zh/llms.txt

# 横幅广告

## 横幅广告类型

Yandex Mobile Ads SDK Yandex Mobile Ads SDK 包含两种横幅广告类型：

#|
||

**横幅广告**

|

**描述**

|

**使用场景**

||
||

粘性横幅广告

|

固定在屏幕边缘并显示在其他元素之上的横幅广告。此类横幅广告不受屏幕滚动影响。

|

如果您希望横幅广告保持“固定效果”，即保持位置不变，即使用户滚动浏览屏幕也始终显示在内容上方。

||
||

内嵌横幅广告

|

嵌入应用中（例如，嵌入内容或列表中）的横幅广告，如同用户界面元素一样呈现。

|

横幅广告应成为页面内容的一部分，例如出现在动态消息中、帖子之间或作为列表项显示。

||
|#

所有类型的横幅广告都会每隔 60 秒自动更新一次广告创意。

{% note tip %}

要设置自定义自动更新周期，请联系您的专属经理。

{% endnote %}

从代码角度来看，这些横幅广告仅在尺寸设置方式上有所不同。例如：

{% list tabs %}

- 粘性横幅广告

    ```TypeScript
    BannerAdSize.StickySize(width: number)
    ```

- 内嵌横幅广告

    ```TypeScript
    BannerAdSize.InlineSize(width: number, maxHeight: number)
    ```

{% endlist %}


#|
||

**实体**

|

**描述**

||
||

`BannerAdSize`

|

横幅广告高度：

- **不得**超过屏幕高度的 15%。

- 必须至少为 50 **dp/pt (Android/iOS)**。

所有横幅广告尺寸必须以 **dp** 为单位指定。

||
||

`adUnitId`

|

用于：

- **Development mode**，用于配合[演示广告单元](https://ads.yandex.com/helpcenter/zh/easy/integration/react-native/testing.md#blocks)使用。

- **Production mode**，用于配合 `R-M-XXXXXX-Y` 使用（实际 ID 请在 Yandex Advertising Network 界面查询）。`R-M-XXXXXX-Y` 是您实际广告单元 ID 的模板，将用于接收各种广告创意。

||
|#


## 创建横幅广告示例

```JavaScript
import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Alert, Dimensions, StyleSheet, Text, View } from 'react-native';
import { AdRequest, AdTheme, BannerAdSize, BannerView, Gender, Location } from 'yandex-mobile-ads';

const BANNER_AD_UNIT_ID = 'demo-banner-yandex';

export default function BannerAd() {
  const [adLoaded, setAdLoaded] = useState(false);
  const [adSize, setAdSize] = useState<BannerAdSize | null>(null);
  const [error, setError] = useState<Error | string | null>(null);
  const [screenWidth, setScreenWidth] = useState(Dimensions.get('window').width);

  useEffect(() => {
    const subscription = Dimensions.addEventListener('change', ({ window }) => {
      setScreenWidth(window.width);
    });
    return () => subscription?.remove();
  }, []);

  useEffect(() => {
      console.log('🔍 Creating banner size for width:', screenWidth);

      BannerAdSize.stickySize(screenWidth)
        .then((size) => {
          console.log('✅ Banner size created:', size);
          setAdSize(size);
        })
        .catch((err) => {
          console.error('❌ Failed to create banner size:', err);
          setError(err);
        });

    return () => {};
  }, [screenWidth]);

  const adRequest = new AdRequest({
    age: '20',
    contextQuery: 'context-query',
    contextTags: ['context-tag'],
    gender: Gender.Male,
    location: new Location(55.734202, 37.588063),
    adTheme: AdTheme.Light,
    parameters: new Map<string, string>([
      ['param1', 'value1'],
      ['param2', 'value2']
    ]),
  });

  if (error) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Banner Ad</Text>
        <Text style={styles.errorText}>
          ❌ Error: {error instanceof Error ? error.message : String(error)}
        </Text>
        <Text style={styles.hintText}>
          Make sure you are NOT using Expo Go!{'\n'}
          Run: <Text style={styles.codeText}>npx expo run:ios</Text>
        </Text>
      </View>
    );
  }

  if (!adSize) {
    return (
      <View style={styles.container}>
        <Text style={styles.title}>Banner Ad</Text>
        <ActivityIndicator size="large" color="#007AFF" />
        <Text style={styles.status}>⏳ Preparing banner...</Text>
      </View>
    );
  }

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Banner Ad</Text>
      <Text style={styles.status}>
        {adLoaded ? '✅ Ad Loaded' : '⏳ Loading...'}
      </Text>

      <View style={[styles.adContainer, { width: adSize.width, height: adSize.height }]}>
        <BannerView
          adUnitId={BANNER_AD_UNIT_ID}
          adRequest={adRequest}
          size={adSize}
          onAdLoaded={() => {
            setAdLoaded(true);
            console.log('✅ Banner ad loaded');
          }}
          onAdFailedToLoad={(error: any) => {
            console.error('❌ Banner ad failed:', error);
            Alert.alert('Ad Failed', error?.message || 'Unknown error');
          }}
          onAdClicked={() => console.log('👆 Banner clicked')}
          onAdImpression={(data: any) => console.log('👁️ Impression:', data)}
        />
      </View>

      <Text style={styles.sizeInfo}>
        Size: {adSize.width}x{adSize.height} dp
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  status: {
    fontSize: 16,
    marginBottom: 20,
    color: '#666',
  },
  adContainer: {
    backgroundColor: '#fff',
    borderRadius: 10,
    overflow: 'hidden',
    marginVertical: 20,
  },
  sizeInfo: {
    fontSize: 12,
    color: '#999',
    marginTop: 10,
  },
  errorText: {
    fontSize: 14,
    color: '#f00',
    textAlign: 'center',
    padding: 20,
  },
  hintText: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    marginTop: 10,
  },
  codeText: {
    fontFamily: 'monospace',
    backgroundColor: '#e0e0e0',
    padding: 4,
  },
});

```

## 检查集成

您可以使用我们的[演示项目](https://ads.yandex.com/helpcenter/zh/easy/integration/react-native/testing.md)测试广告格式的效果。