我正在构建一个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版本一样工作,但如果失败了,测试设备上的应用程序在启动屏幕后立即崩溃。
1条答案
按热度按时间2skhul331#
我认为你对这个代码有问题。此处screen不是组件。请检查一下。或共享
fundraisingScreens
对象。你正在给一个组件一个对象屏幕。请再检查一遍。字符串