为什么我只在导航到一个特定组件而不是其他组件时收到此 React Native 导航错误？

Question

我目前正在开发一个基本上使用这些组件的 React Native 聊天应用程序：“主页”、“登录”和“聊天”——每个组件都是一个屏幕/页面。

导航组件错误：

在这种情况下，我尝试使用：

<TouchableOpacity onPress={() => props.navigation.navigate('Home')} />

为了从“聊天”组件返回“主页”组件，但它抛出上述错误，我必须重新加载应用程序。

return (
    <>
      <Header {...props} chat menuItems={menuItems} chatData={isGroup ? {name: groupName, avatar: groupImage} : recipient} isGroup={isGroup}
        chatTitle={
          <Content>
            <TouchableOpacity onPress={() => props.navigation.navigate('Home')} style={{marginBottom: 30}}>
              <Icon size={33} height={40} name="chevron-left-outline" />
            </TouchableOpacity>
            <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center', marginBottom: 15}} onPress={navigateProfile}>
              <HeaderAvatar source={getAvatarPath(isGroup ? groupImage : recipient.avatar, isGroup)} />
              <View>
                <Name noFont>{isGroup ? groupName : recipient.name}</Name>
                {!isGroup && recipientTyping ? <StatusTxt>Typing...</StatusTxt> : isOnline ? <StatusTxt>Online</StatusTxt> : null}
              </View>
            </TouchableOpacity>
          </Content>
        }
      />
      {loading ? <Loading/> :
        <View style={themeStyle.body}>
          <GiftedChat
            messages={messagesData}
            user={{_id: user._id}}
            minInputToolbarHeight={60}
            renderMessageVideo={renderVideoMessage}
            renderMessage={props => {
              if (props.currentMessage.audio)
                return <AudioPlayer {...props} currentAudioId={currentAudioId} you={(props.currentMessage._id === currentAudioId).toString()} setCurrentAudioId={setCurrentAudioId} />;
              if (props.currentMessage.text){
                if(typeof(props.currentMessage.text) === 'string')
                  return <Message {...props} />
                else 
                props.currentMessage.text = (props.currentMessage?.text.find(i => i.language === user.language))?.text;
                return <Message {...props} />
              }
              return <Message {...props} />;
            }}
            renderBubble={props => {
              if (props.currentMessage.location) return <LocationMessage location={props.currentMessage.location} messagePosition={props.position} />;
              else {
                const allProps = {...props, ...bubbleProps};
                return <Bubble {...allProps} />;
              }
            }}
            renderAvatar={props => <Avatar {...props} containerStyle={{left: {top: -10, marginRight: 0}}} />}
            renderInputToolbar={() => <ChatInput value={message} onChange={setMessage} onSend={onSend} appendMessage={appendMessage} updateMessageData={updateMessageData} />}
            extraChatData={{currentAudioId}}
            listViewProps={{ListFooterComponent: renderLoadMoreBtn}}
          />
        </View>
      }
    </>

我试过使用：

props.navigation.goBack()

但这也会引发同样的上述错误。

但是，

props.navigation.navigate('Login')

工作时不会抛出任何错误。当尝试从“聊天”组件导航到“登录”组件时，它将短暂重定向到登录屏幕，然后再次重定向到主屏幕。

还有一个单独的可能相关的错误：

新聊天错误：

在将 .navigate() 设置到 Login 组件并从 Chat 组件重定向到 Home 组件后，再次尝试导航到 Chat 组件时开始显示此错误。为了继续使用该应用程序，此错误不需要重新加载，但我仍然不确定为什么会抛出错误。

有人知道为什么只直接导航回“主页”组件会使应用程序崩溃吗？

这是带有导航脚本的组件：

import React from 'react';
import {useColorScheme, StatusBar} from 'react-native';
import {NavigationContainer, DefaultTheme} from '@react-navigation/native';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import {Chat, Home, Login, SignUp, UserProfile, Profile, GroupProfile, MediaManager} from "../screens";
import {theme} from "./theme";
import saga from "./saga";
import {useInjectSaga} from "../utils/injectSaga";
import {navigationRef} from './Navigator';
import LinkWeb from "../screens/LinkWeb";
import BlockedList from "../screens/BlockedList";

const Stack = createNativeStackNavigator();

const appNavigator = () => {
  const routeNameRef = React.useRef();
  const scheme = useColorScheme();
  useInjectSaga({key: 'root', saga});

  React.useEffect(() => {
    if (scheme === 'dark') {
      setTimeout(() => {
        StatusBar.setBackgroundColor(theme.dark.bg);
        StatusBar.setBarStyle('light-content');
      }, 100);
    }
  }, []);

  const MyTheme = React.useMemo(() => ({
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: scheme === 'dark' ? theme.dark.bg : theme.light.bg
    },
  }), [scheme]);

  const stackOptions = React.useMemo(() => ({headerShown: false}), []);

  return (
    <NavigationContainer
      theme={MyTheme} ref={navigationRef}
      onReady={() => {routeNameRef.current = navigationRef.getCurrentRoute().name;}}
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.getCurrentRoute().name;
        if (previousRouteName !== currentRouteName && scheme !== 'dark') {
          if (currentRouteName === 'UserProfile') {
            StatusBar.setBarStyle('light-content');
            StatusBar.setBackgroundColor('#000')
          } else {
            StatusBar.setBarStyle('dark-content');
            StatusBar.setBackgroundColor('#fff')
          }
        }
        routeNameRef.current = currentRouteName;
      }}
    >
      <Stack.Navigator screenOptions={stackOptions}>
        <Stack.Screen name="Login" component={Login}/>
        <Stack.Screen name="SignUp" component={SignUp}/>
        <Stack.Screen name="Home" component={Home}/>
        <Stack.Screen name="Chat" component={Chat}/>
        <Stack.Screen name="UserProfile" component={UserProfile}/>
        <Stack.Screen name="Profile" component={Profile}/>
        <Stack.Screen name="GroupProfile" component={GroupProfile}/>
        <Stack.Screen name="LinkWeb" component={LinkWeb}/>
        <Stack.Screen name="BlockedList" component={BlockedList}/>
        <Stack.Screen name="MediaManager" component={MediaManager}/>
      </Stack.Navigator>
    </NavigationContainer>
  )
};

export default appNavigator;

Answer 1

超级简单的解决方案：

只需更新我的 react-native-gifted-chat 版本。