React Native:iPhone发布版本的Xcode错误,“未处理的JS异常:错误:导航器不能包含多个“屏幕”

vwhgwdsa  于 2023-08-07  发布在  React
关注(0)|答案(1)|浏览(82)

我正在构建一个react native应用程序,以前在xcode 13中,我可以轻松地编译应用程序的调试版本和发布版本。最近testflight商店需要更高的sdk,这需要我更新xcode。从那时起,我就犯了这个错误。

Thread 3: "Unhandled JS Exception: Error: A navigator cannot contain multiple 'Screen' components with the same name (found duplicate screen named 'x')\n\nThis error is located at:\n    in ..., stack:\n<unknown>@628:455\nreduce@(null):(null)\n<unknown>@628:404\n<unknown>@560:2095\nyr@51:42093\nql@51:90953\nFa@51:81725\nUa@51:81627\nLa@51:81392\nEa@51:78355\nEa@(null):(null)\nft@51:26123\n_a@51:75444\nli@51:89691\n<unknown>@51:96441\n<unknown>@359:641\nrun@356:741\nrunApplication@356:1812\nvalue@38:3556\n<unknown>@38:673\nvalue@38:2503\nvalue@38:645\nvalue@(null):(null)\n"

字符串
我试过删除pod、podfile.lock、node模块、yarn包管理器,然后重新安装所有东西。(出现相同的错误)我已将我的节点模块和依赖项升级到其最新版本。(同样的错误发生)我已经深入研究了我的导航,由于应用程序的大小,这是粗糙的,但在这里:

import React, { useEffect, useState, useContext } from 'react';
import { View } from 'react-native';
import { createStackNavigator } from '@react-navigation/stack';
import Header from './../components/Header';
import colors from './../constants/colors';
import {
  CometChatUserProfile,
  CometChatUI,
  CometChatMessages,
  CometChatUserListWithMessages,
  CometChatUserList,
  CometChatGroupListWithMessages,
  CometChatGroupList,
  CometChatConversationListWithMessages,
  CometChatConversationList,
} from '../screens/cometchat-pro-react-native-ui-kit-3';

import {
  eventScreens,
  homeScreens,
  serviceScreens,
  fundraisingScreens,
  loginRegisterScreens as authScreens,
  newPawsScreens,
  groupScreens,
  lostPetScreens
} from '../screens/index.js'

import Video from '../screens/video/Video'

import { useAppContext } from '../components/AppContextProvider';

// ======================================================================================
// I tried to organize this code as much as possible. If you are using VS code, you can collapse 
// all of the <Stack.Group> components and find what you need so much faster. The imports are also
// cleaner and easier to read. Overall, this document is much, much smaller.
//
// If you need to add imports, just go to the individual index.js files in each /screens/* folder and add it there.
// Then, import the namespace (folder index.js) into the index.js of the /screens folder
//
// It will require a bit of refactoring app-wide, but is useful for new interns/new hires to get up to speed.
//
// 
// ======================================================================================

export function RootStack(props, { navigation }) {
  const { owner } = useAppContext()

  const Stack = createStackNavigator();

  function returnScreens(screenImport) {
    const options = { headerShown: false }

    const screens = Object.values(screenImport).map(screen => (
      <Stack.Screen
        name={screen.name}
        component={screen}
        options={options}
      />
    ))

    return screens
  }

  function returnHomeScreens() {
    const screensWithoutTitle = [
      "OwnerProfile",
      "FriendProfile",
      "EditProfile",
      "OwnerGallery",
      "PetGallery"
    ]

    const screens = screensWithoutTitle.map(screenName => (
      <Stack.Screen
        name={screenName}
        component={homeScreens[screenName]}
        options={{ headerShown: false }}
      />
    ))

    return screens
  }

  function returnFundraiserScreens() {
    const screensWithHeader = [
      "Chewy",
      "WalkFundraising",
      "WalkFundraising2",
      "WalkSubmit",
      "WalkInvite",
      "ActiveWalk"
    ]

    const headerScreenOptions = {
      title: (
        <View style={{ flex: 1, maxHeight: 40 }}>
          <Header style={{ backgroundColor: 'transparent' }} />
        </View>
      ),
      headerStyle: {
        backgroundColor: colors.Primary,
      },
      headerTintColor: colors.White,
      headerShown: true,
    }

    const screens = Object.values(fundraisingScreens).map(screen => {
      if (screensWithHeader.includes(screen.name)) return(
        <Stack.Screen
          name={screen.name}
          component={screen}
          options={headerScreenOptions}
        />
      )

      else return(
        <Stack.Screen
          name={screen.name}
          component={screen}
          options={{
            headerTintColor: colors.White,
            headerShown: false,
          }}
        />
      )
    })

    return screens
  }

  return (
    <Stack.Navigator initialRouteName={ "Login"}>
      {/* Signup / Register */}
      <Stack.Group>
        {returnScreens(authScreens)}
      </Stack.Group>

      {/* Home */}
      <Stack.Group>
        {returnHomeScreens()}

        {/* The rest are all different so it doesn't make sense to abstract them like we do for other screens */}
        <Stack.Screen
          name="PetProfile"
          component={homeScreens.PetProfile}
          options={{
            title: (
              <View style={{ flex: 1, maxHeight: 40 }}>
                <Header />
              </View>
            ),
            headerStyle: {
              backgroundColor: colors.Primary,
            },
            headerTintColor: colors.White,
            headerShown: false,
          }}
        />

        <Stack.Screen
          name="OwnerSettings"
          component={homeScreens.OwnerSettings}
          options={{
            title: (
              <View style={{ flex: 1, maxHeight: 40 }}>
                <Header />
              </View>
            ),
            headerStyle: {
              backgroundColor: colors.Primary,
            },
            headerTintColor: colors.White,
            headerShown: true,
          }}
        />

        <Stack.Screen
          name="DirectMessage"
          component={homeScreens.DirectMessage}
          options={{ headerShown: false }}
        />

        <Stack.Screen
          name="HomeLanding"
          component={homeScreens.HomeLanding}
          options={{
            headerStyle: {
              backgroundColor: colors.Primary,
            },
            headerTintColor: colors.White,
            headerShown: false,
          }}
          initialParams={{ owner: owner }}
        />
    
        <Stack.Screen
          name="Calender"
          component={homeScreens.Calender}
          options={{
            title: (
              <View style={{ flex: 1, maxHeight: 40 }}>
                <Header />
              </View>
            ),
            headerStyle: {
              backgroundColor: colors.Primary,
            },
            headerTintColor: colors.White,
            headerShown: true,
          }}
        />

        <Stack.Screen
          name="FriendList"
          component={homeScreens.FriendList}
          options={{
            headerTintColor: colors.White,
            headerShown: false,
          }}
        />
      </Stack.Group>

      {/* Meet New Paws */}
      <Stack.Group>
        {returnScreens(newPawsScreens)}
      </Stack.Group>

      {/* Services */}
      <Stack.Group>
        {returnScreens(serviceScreens)}
      </Stack.Group>

      {/* Events */}
      <Stack.Group>
        {returnScreens(eventScreens)}
      </Stack.Group>

      {/* Groups */}
      <Stack.Group>
        {returnScreens(groupScreens)}
      </Stack.Group>

      {/* Lost/Found */}
      <Stack.Group>
        {returnScreens(lostPetScreens)}
      </Stack.Group>

      {/* Fundraisers */}
      <Stack.Group>
        {returnFundraiserScreens()}
      </Stack.Group>

      {/*  CometChat */}
      <Stack.Group>
        <Stack.Screen name="GroupListWithMessages" component={CometChatGroupListWithMessages} />

        <Stack.Screen /// Commet Chat UI Kit
          options={{
            headerShown: false,
            "tabBarActiveTintColor": "#3399ff",
            "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
            "tabBarActiveBackgroundColor": "#fff",
            "tabBarInactiveBackgroundColor": "#fff",
            "tabBarLabelStyle": {
              "fontSize": 12
            },
            "tabBarStyle": [
              {
                "display": "flex"
              },
              null
            ]
          }}
          name="CometChatUI" 
          component={CometChatUI} 
        />

        <Stack.Screen
            name="Conversation"
            options={{
          headerShown: false,
    "tabBarActiveTintColor": "#3399ff",
    "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
    "tabBarActiveBackgroundColor": "#fff",
    "tabBarInactiveBackgroundColor": "#fff",
    "tabBarLabelStyle": {
      "fontSize": 12
    },
    "tabBarStyle": [
      {
        "display": "flex"
      },
      null
    ]
  }}
            component={CometChatConversationListWithMessages}
          />

          <Stack.Screen
            name="ConversationComponent"
            options={{
          headerShown: false,
    "tabBarActiveTintColor": "#3399ff",
    "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
    "tabBarActiveBackgroundColor": "#fff",
    "tabBarInactiveBackgroundColor": "#fff",
    "tabBarLabelStyle": {
      "fontSize": 12
    },
    "tabBarStyle": [
      {
        "display": "flex"
      },
      null
    ]
  }}
            component={CometChatConversationList}
          />

          <Stack.Screen name="Group" 
            options={{
          headerShown: false,
    "tabBarActiveTintColor": "#3399ff",
    "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
    "tabBarActiveBackgroundColor": "#fff",
    "tabBarInactiveBackgroundColor": "#fff",
    "tabBarLabelStyle": {
      "fontSize": 12
    },
    "tabBarStyle": [
      {
        "display": "flex"
      },
      null
    ]
  }}
  component={CometChatGroupListWithMessages} />

          <Stack.Screen name="GroupComponent" 
            options={{
          headerShown: false,
    "tabBarActiveTintColor": "#3399ff",
    "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
    "tabBarActiveBackgroundColor": "#fff",
    "tabBarInactiveBackgroundColor": "#fff",
    "tabBarLabelStyle": {
      "fontSize": 12
    },
    "tabBarStyle": [
      {
        "display": "flex"
      },
      null
    ]
  }}
  component={CometChatGroupList} />

          <Stack.Screen name="Users" 
            options={{
          headerShown: false,
    "tabBarActiveTintColor": "#3399ff",
    "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
    "tabBarActiveBackgroundColor": "#fff",
    "tabBarInactiveBackgroundColor": "#fff",
    "tabBarLabelStyle": {
      "fontSize": 12
    },
    "tabBarStyle": [
      {
        "display": "flex"
      },
      null
    ]
  }}
  component={CometChatUserListWithMessages} />

          <Stack.Screen name="UsersComponent" 
            options={{
          headerShown: false,
    "tabBarActiveTintColor": "#3399ff",
    "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
    "tabBarActiveBackgroundColor": "#fff",
    "tabBarInactiveBackgroundColor": "#fff",
    "tabBarLabelStyle": {
      "fontSize": 12
    },
    "tabBarStyle": [
      {
        "display": "flex"
      },
      null
    ]
  }}
  component={CometChatUserList} />

          <Stack.Screen name="CometChatMessages"
            options={{
          headerShown: false,
    "tabBarActiveTintColor": "#3399ff",
    "tabBarInactiveTintColor": "rgba(0,0,0,0.5)",
    "tabBarActiveBackgroundColor": "#fff",
    "tabBarInactiveBackgroundColor": "#fff",
    "tabBarLabelStyle": {
      "fontSize": 12
    },
    "tabBarStyle": [
      {
        "display": "flex"
      },
      null
    ]
  }}
  component={CometChatMessages} />
      </Stack.Group>

      {/* Video */}
      <Stack.Screen
        name="Video"
        component={Video}
        options={{
          title: (
            <View style={{ flex: 1, maxHeight: 40 }}>
              <Header style={{ backgroundColor: 'transparent' }} />
            </View>
          ),
          headerStyle: {
            backgroundColor: colors.Primary,
          },
          headerTintColor: colors.White,
          headerShown: true,
        }}
      />
    </Stack.Navigator>
  );
}

export default RootStack;


我没有看到任何重复的屏幕名称的索引。错误也没有引用实际的屏幕名称“x”,也没有给予文件的位置。
我尝试以发布格式编译我的应用程序,以便上传到testflight进行内部测试。我希望它能像以前的xcode版本一样工作,但如果失败了,测试设备上的应用程序在启动屏幕后立即崩溃。

2skhul33

2skhul331#

我认为你对这个代码有问题。此处screen不是组件。请检查一下。或共享fundraisingScreens对象。你正在给一个组件一个对象屏幕。请再检查一遍。

function returnFundraiserScreens() {
    const screensWithHeader = [
      'Chewy',
      'WalkFundraising',
      'WalkFundraising2',
      'WalkSubmit',
      'WalkInvite',
      'ActiveWalk',
    ];

    const headerScreenOptions = {
      title: (
        <View style={{flex: 1, maxHeight: 40}}>
          <Header style={{backgroundColor: 'transparent'}} />
        </View>
      ),
      headerStyle: {
        backgroundColor: colors.Primary,
      },
      headerTintColor: colors.White,
      headerShown: true,
    };

    const screens = Object.values(fundraisingScreens).map(screen => {
      if (screensWithHeader.includes(screen.name))
        return (
          <Stack.Screen
            name={screen.name}
            component={screen}
            options={headerScreenOptions}
          />
        );
      else
        return (
          <Stack.Screen
            name={screen.name}
            component={screen}
            options={{
              headerTintColor: colors.White,
              headerShown: false,
            }}
          />
        );
    });

    return screens;
  }

字符串

相关问题