Erreur : module requis qui génère une exception : violation invariante : "background" "background" n'est pas un attribut de style valide

Question

Je mets en œuvre les appels vocaux individuels ZEGCLOUD. J'ai rencontré cette erreur.

Erreur : module requis "node_modules@zegocloudzego-uikit-prebuilt-call-rnlibcommonjsindex.js", Exception levée : violation invariante : « arrière-plan » n'est pas Attributs de style valides.

Code CallScreen. Qu'est-ce que je fais de mal ici. J'ai également examiné les modules de nœuds. Je n'ai trouvé aucun style pour audioVideoViewSubContainer. J'ai également nettoyé Gradle et effectué une réinitialisation du cache 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,
  },
});

Image d'erreur :

Réaction du médecin local :

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

Réagissez aux informations natives :

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

J'ai trouvé l'erreur @zegocloud/zego-uikit-prebuilt-call-rnDocuments Changez simplement l'arrière-plan en backgroundColor

Chemin du fichier dans le module de nœud

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