错误：要求抛出异常的模块：不变违规：'背景”'背景”不是有效的样式属性

Question

我正在实施ZEGCLOUD一对一语音通话。我遇到了这个错误。

错误：需要模块 “node_modules@zegocloud\zego-uikit-prebuilt-call-rn\lib\commonjs\index.js”， 抛出异常：不变违规：“背景”不是 有效的样式属性。

CallScreen 代码。我在这里做错了什么。我还研究了节点模块。我没有找到任何样式audioVideoViewSubContainer。 我还清理了 gradle 并执行了 npm 缓存重置。

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,
  },
});

错误图像：

反应本土医生：

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

反应原生信息：

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

Answer 1

我发现了错误 @zegocloud/zego-uikit-prebuilt-call-rn 文件 只需将背景更改为backgroundColor即可

节点模块中的文件路径

node_modules\@zegocloud\zego-uikit-rn\lib\commonjs\components\audio_video_container\ZegoAudioVideoContainer