添加 Google AdMob 代码后出现错误答案

【问题标题】：Error appeared after I add Google AdMob code添加 Google AdMob 代码后出现错误
【发布时间】：2021-12-31 16:36:24
【问题描述】：

我在尝试添加用于将 Google AdMob 广告插入应用项目的代码时遇到错误消息。代码是：

<AdMobBanner
      bannerSize="banner"
      adUnitID="ca-app-pub-3038938528713825/5887864345"
      testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
    />

snack.expo.io 在我添加上面的代码后显示了一条错误消息和一个weblink 到错误消息中。错误信息是：

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但得到：未定义

当我将 Google AdMob 的代码插入到项目中时，我完全不明白导致此错误发生的原因。

这是我项目的全部代码：

import * as React from 'react';
import { View, Text, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

import {AdMobBanner} from 'expo';

const HomeScreen = ({ navigation }) => {

  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Page 2" onPress={() => navigation.navigate('Page2')}
      />

<AdMobBanner
          bannerSize="banner"
          adUnitID="ca-app-pub-3038938528713825/5887864345"
          testDeviceID="CF583E54-34C6-453C-80FC-493D2468A51E"
        />

    </View>
  );

}

const Page2Screen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Page 2 Screen</Text>
      <Button
        title="Go to Page 3"
        onPress={() => navigation.navigate('Page3')}
      />
      
    </View>
  );
}

const Page3Screen = ({ navigation }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Page 3 Screen</Text>
      <Button
        title="Go to Home"
        onPress={() => navigation.navigate('Home')}
      />
      <Button
        title="Go back to first screen in stack"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Page2" component={Page2Screen} />
        <Stack.Screen name="Page3" component={Page3Screen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

这里是我的 package.json 的代码：

{
  "dependencies": {
    "react-native-screens": "~3.8.0",
    "@react-navigation/stack": "*",
    "@react-navigation/native": "*",
    "react-native-gesture-handler": "~1.10.2",
    "react-native-safe-area-context": "3.3.2"
  }
}

【问题讨论】：

标签： react-native expo

【解决方案1】：

您的 package.json 中没有将 expo 列为依赖项，因此您的导入将是未定义的。你是用expo init 开始这个项目的吗？

您可以尝试将 expo 添加到您的依赖项或使用 expo 初始化一个新项目。我建议开始一个新项目，以从任何额外的设置博览会中获益。

【讨论】：