集成ZEGOCLOUD一对一语音通话时遇background样式属性无效错误

我在React Native中实现ZEGOCLOUD一对一语音通话功能时出现如下错误：

Error: Requiring module "node_modules@zegocloud\zego-uikit-prebuilt-call-rn\lib\commonjs\index.js", which threw an exception: Invariant Violation: "background" is not a valid style property.

我已检查node_modules，未找到audioVideoViewSubContainer样式，且执行过gradle清理和npm缓存重置操作。以下是CallScreen的代码：

import React, {useRef} from 'react';

import {StyleSheet, View, Text, Button} from 'react-native';
import {
  ZegoUIKitPrebuiltCall,
  ONE_ON_ONE_VIDEO_CALL_CONFIG,
  GROUP_VOICE_CALL_CONFIG,
  ONE_ON_ONE_VOICE_CALL_CONFIG,
} from '@zegocloud/zego-uikit-prebuilt-call-rn';
import {AppId, AppSignIn} from '../../constants';
export default function CallScreen(props) {
  const prebuiltRef = useRef();
  const {route} = props;
  const {params} = route;
  const {userID, userName} = params;

  return (
    <View style={styles.container}>
      <ZegoUIKitPrebuiltCall
        ref={prebuiltRef}
        appID={AppId}
        appSign={AppSignIn}
        userID={userID}
        userName={userName}
        callID="rn12345678"
        config={{
          ...ONE_ON_ONE_VOICE_CALL_CONFIG,
          // ...ONE_ON_ONE_VIDEO_CALL_CONFIG,
          onHangUp: () => {
            console.log('########CallPage onHangUp');
            props.navigation.navigate('HomeScreen');
          },
          durationConfig: {
            isVisible: true,
            onDurationUpdate: duration => {
              console.log('########CallPage onDurationUpdate', duration);
              if (duration === 5) {
                prebuiltRef.current.hangUp();
              }
            },
          },
        }}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    zIndex: 0,
  },
});

错误截图：

React Native Doctor结果： #

Common
 ✓ Node.js
 ✓ npm

Android
 ✓ JDK
 ✓ Android Studio - Required for building and installing your app on Android
 ✓ Android SDK - Required for building and installing your app on Android
 ✓ ANDROID_HOME

Errors:   0
Warnings: 0

React Native Info： #

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19045
    CPU: (4) x64 Intel(R) Core(TM) i7-7500U CPU @ 2.70GHz
    Memory: 6.04 GB / 15.87 GB
  Binaries:
    Node: 16.17.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files\nodejs\yarn.CMD
    npm: 9.6.6 - C:\Program Files\nodejs\npm.CMD
    Watchman: 20220320.140531.0 - C:\ProgramData\chocolatey\bin\watchman.EXE
  SDKs:
    Android SDK:
      API Levels: 23, 25, 28, 29, 30, 31, 32, 33
      Build Tools: 28.0.3, 29.0.2, 29.0.3, 30.0.0, 30.0.1, 30.0.2, 30.0.3, 31.0.0, 32.0.0, 32.1.0, 33.0.0
      System Images: android-28 | Google APIs Intel x86 Atom_64, android-29 | Intel x86 Atom_64, android-29 | Google APIs Intel x86 Atom_64, android-30 | Intel x86 Atom_64, android-30 | Google Play Intel x86 Atom
      Android NDK: Not Found
    Windows SDK: Not Found
  IDEs:
    Android Studio: AI-213.7172.25.2113.9123335
    Visual Studio: Not Found
  Languages:
    Java: 15.0.2
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.1 => 17.0.1
    react-native: 0.64.2 => 0.64.2
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

解决方案 #

1. 降级ZEGOCLOUD UIKit版本 #

你的React Native版本（0.64.2）较为老旧，当前使用的@zegocloud/zego-uikit-prebuilt-call-rn版本可能引入了RN旧版本不支持的样式属性（比如Web端的background，RN中标准属性为backgroundColor）。

尝试安装兼容RN 0.6x的旧版本，例如：

npm install @zegocloud/zego-uikit-prebuilt-call-rn@2.1.0

具体兼容版本可参考ZEGOCLOUD官方文档或npm仓库的版本历史。

2. 自定义UI样式覆盖错误属性 #

如果不想降级，可以通过组件的customUIConfig参数，手动覆盖有问题的样式，将background替换为RN支持的backgroundColor：

config={{
  ...ONE_ON_ONE_VOICE_CALL_CONFIG,
  onHangUp: () => {
    console.log('########CallPage onHangUp');
    props.navigation.navigate('HomeScreen');
  },
  durationConfig: {
    isVisible: true,
    onDurationUpdate: duration => {
      console.log('########CallPage onDurationUpdate', duration);
      if (duration === 5) {
        prebuiltRef.current.hangUp();
      }
    },
  },
  customUIConfig: {
    // 找到对应使用了background的组件样式名，替换为backgroundColor
    audioVideoViewSubContainer: {
      backgroundColor: '#000000', // 替换为你需要的背景色
      // 其他样式属性
    }
  }
}}

如果找不到audioVideoViewSubContainer，可查看ZEGOCLOUD官方文档中customUIConfig的可用配置项，定位对应的容器样式。

3. 升级React Native版本（谨慎操作） #

如果项目允许，将React Native升级到0.68及以上版本，新版本对第三方库的兼容性更好。但升级可能会带来其他依赖的适配问题，需要做好全面测试。

内容的提问来源于stack exchange，提问作者Ali Hassan