React Native集成Zego通话邀请组件时出现TypeError及App未注册错误的解决求助

各位大佬好，我在React Native项目里集成Zego的通话邀请组件时碰到了两个棘手的错误，折腾了好久都没解决，想请大家帮忙看看。我已经安装了所有需要的依赖包，用的也是最新版的React Native，但还是报下面的错误：

ERROR  TypeError: Cannot read property 'prefix' of null, js engine: hermes

LOG  Running "Callapp" with {"rootTag":41}

ERROR  Invariant Violation: "Callapp" has not been registered. This can happen if:

Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.

A module failed to load due to an error and AppRegistry.registerComponent wasn't called., js engine: hermes

以下是我的项目代码和依赖配置：

App.js 代码 #

import {
  ZegoUIKitPrebuiltCallWithInvitation,
  ZegoStartCallInvitationButton,
  ZegoInvitationType,
  ONE_ON_ONE_VIDEO_CALL_CONFIG,
  ONE_ON_ONE_VOICE_CALL_CONFIG,
  GROUP_VIDEO_CALL_CONFIG,
  GROUP_VOICE_CALL_CONFIG,
} from '@zegocloud/zego-uikit-prebuilt-call-rn';

import ZegoUIKitSignalingPlugin from '@zegocloud/zego-uikit-signaling-plugin-rn';

import React, {useState} from 'react';
import {View, Text, TextInput, Button, TouchableOpacity} from 'react-native';

import {NavigationContainer, useNavigation} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';

//
import CallingScreen from './CallingScreen';

function HomeScreen() {
  const [userId, setUserId] = useState('');
  const [invitees, setInvitees] = useState([]);
  const navigation = useNavigation();

  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <View style={{width: '90%'}}>
        <TextInput
          style={{borderWidth: 1, borderColor: 'black', marginBottom: 20}}
          value={userId}
          onChangeText={text => {
            setUserId(text);
            setInvitees(text.split(','));
          }}
          placeholder={'Invite Your Friend Please Enter All Id'}
        />
        <View style={{alignItems: 'center'}}>
          <ZegoStartCallInvitationButton
            invitees={invitees} // ID of the invited user.
            isVideoCall={true}
          />
        </View>
      </View>
    </View>
  );
}

const Stack = createNativeStackNavigator();

function App() {
  const userID = `${String(Math.floor(Math.random() * 10000))}`;
  const userName = `user_${userID}`;

  return (
    <ZegoUIKitPrebuiltCallWithInvitation
      appID={appid}
      appSign={
        'appkey'
      }
      userID={userID} // userID can be something like a phone number or the user id on your own user system.
      userName={userName}
      ringtoneConfig={{
        incomingCallFileName: 'zego_incoming.mp3',
        outgoingCallFileName: 'zego_outgoing.mp3',
      }}
      requireConfig={data => {
        const config =
          data.invitees.length > 1
            ? ZegoInvitationType.videoCall === data.type
              ? GROUP_VIDEO_CALL_CONFIG
              : GROUP_VOICE_CALL_CONFIG
            : ZegoInvitationType.videoCall === data.type
            ? ONE_ON_ONE_VIDEO_CALL_CONFIG
            : ONE_ON_ONE_VOICE_CALL_CONFIG;

        return config;
      }}
      plugins={[ZegoUIKitSignalingPlugin]} // The signaling plug-in used for call invitation must be set here.
    >
      <Text
        style={{
          position: 'absolute',
          bottom: 0,
          left: 0,
          right: 0,
          zIndex: 10,
          textAlign: 'center',
          color: 'black',
          fontWeight: 'bold',
        }}>
        UserId :- {userID}
      </Text>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen
          name="CallingScreen"
          component={CallingScreen}
          options={{
            headerShown: false,
          }}
        />
      </Stack.Navigator>
    </ZegoUIKitPrebuiltCallWithInvitation>
  );
}

export default App;

package.json 配置 #

{
  "name": "Callapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@react-navigation/native-stack": "^6.9.13",
    "@zegocloud/zego-uikit-prebuilt-call-rn": "^4.1.3",
    "@zegocloud/zego-uikit-rn": "^2.1.1",
    "@zegocloud/zego-uikit-signaling-plugin-rn": "^1.3.8",
    "react": "18.2.0",
    "react-delegate-component": "^1.0.0",
    "react-native": "0.72.1",
    "react-native-safe-area-context": "^4.6.3",
    "react-native-screens": "^3.22.0",
    "react-native-sound": "^0.11.2",
    "zego-express-engine-reactnative": "^3.2.0",
    "zego-zim-react-native": "^2.8.0"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.7",
    "@tsconfig/react-native": "^3.0.0",
    "@types/metro-config": "^0.76.3",
    "@types/react": "^18.0.24",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.5",
    "prettier": "^2.4.1",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

我已经尝试过重启Metro开发服务器，也确认了所有依赖都通过npm install安装完成，但还是没能解决问题。有没有大佬遇到过类似的情况，能给我一些排查方向或者具体的解决办法吗？非常感谢！

备注：内容来源于stack exchange，提问作者cwecae