使用Agora VideoUIKit-ReactNative构建Android应用时遇SurfaceView未定义错误求助

开发代码 #

import React, {useState} from 'react';
import AgoraUIKit from 'agora-rn-uikit';
import {Text} from 'react-native'; // 原代码缺失该导入，属于潜在问题

const App = () => {
  const [videoCall, setVideoCall] = useState(true);
  const connectionData = {
    appId: '<Agora App ID>',
    channel: 'test',
  };
  const rtcCallbacks = {
    EndCall: () => setVideoCall(false),
  };
  return videoCall ? (
    <AgoraUIKit connectionData={connectionData} rtcCallbacks={rtcCallbacks} />
  ) : (
    <Text onPress={()=>setVideoCall(true)}>Start Call</Text>
  );
};

export default App;

报错信息 #

TypeError: Cannot read property 'SurfaceView' of undefined, js engine: hermes

解决方案 #

• 校验依赖版本兼容性：确保agora-rn-uikit与它依赖的react-native-agora版本匹配，参考官方文档指定的兼容版本组合，避免版本不匹配导致原生模块初始化失败。
• 检查Android原生配置：
  1. 确认android/build.gradle中已添加Agora的Maven仓库：

     allprojects {
         repositories {
             // 其他已存在的仓库
             maven { url 'https://maven.agora.io/repository/release' }
         }
     }
     

  2. 验证react-native-agora模块链接状态：React Native 0.60+版本自动链接通常生效，低版本需手动执行react-native link react-native-agora，或者检查android/app/src/main/java/.../MainApplication.java中是否正确添加了Agora模块的引用。
• 清理构建缓存：
  1. 进入Android目录执行./gradlew clean清理本地构建缓存
  2. 返回项目根目录执行npx react-native start --reset-cache重置Metro缓存
• 补全权限配置：确保android/app/src/main/AndroidManifest.xml中添加了必要权限：

  <uses-permission android:name="android.permission.INTERNET" />
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
  <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />
  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  

• 修复代码遗漏：补充Text组件的导入语句，避免额外运行时错误。

内容的提问来源于stack exchange，提问作者Kamyab Ghassemi