React Navigation 嵌套创建无限循环答案

【问题标题】：React Navigation nesting creates infinite loopReact Navigation 嵌套创建无限循环
【发布时间】：2023-02-10 03:21:35
【问题描述】：

所以我正在使用 react navigation v5，并且遇到了这个问题。我的导航开始于：

    
      const RootAppNavigator = () => {
        return(
        <RootApp.Navigator>
        <RootApp.Screen name="App" component={NavigationScreen} />
      </RootApp.Navigator>
        )
      }
    
    export default function App() {
    
      let [fontsLoaded] = useFonts({
        Lobster_400Regular,
      });
    
        // if (!fontsLoaded) {
        //   return <AppLoading />;
        // }
        return <NavigationContainer><RootAppNavigator /></NavigationContainer>;
      }

然后将用户重定向到 NavigationScreen：

const HomeStack = createStackNavigator();
const ProfileStack = createStackNavigator();
const Tab = createBottomTabNavigator();



export default function NavigationScreen() {

  const HomeStackNavigator = () => {
    return (
    <HomeStack.Navigator initialRouteName="Home">
      <HomeStack.Screen name="Home" component={HomeScreen}/>
    </HomeStack.Navigator>
    )
  }

  const ProfileStackNavigator = () => {
    return(
    <ProfileStack.Navigator initialRouteName="Profile" screenOptions={{headerStyle: {elevation: 0},cardStyle: {backgroundColor: '#ffffff'}}}>
      <ProfileStack.Screen name="Profile" component={ProfileScreen}/>
    </ProfileStack.Navigator>
    )
  }
  
  return (
      <Tab.Navigator
      initialRouteName="HomeS"
      >
        <Tab.Screen name="HomeS" component={HomeStackNavigator} />
        <Tab.Screen name="ProfileS" component={ProfileStackNavigator} />
      </Tab.Navigator>
  );
}

现在由于某种原因我无法理解，首先呈现主屏幕，但是只要我单击选项卡导航器上的配置文件屏幕，就会呈现配置文件屏幕，但在这两个屏幕之间开始无限循环。（通过登录找到它他们的 componentDidMount 函数，切换在移动设备上是不可见的。）。在某个时候循环停止，我得到一个最大更新深度超出错误。

任何帮助将非常感激。

【问题讨论】：

标签： reactjs react-native react-navigation react-navigation-v5

【解决方案1】：

于是在头脑清醒的情况下回头查看后，才发现是什么原因造成的。我在 App.js 中使用了一个额外的不必要的导航器


      const RootAppNavigator = () => {
        return(
        <RootApp.Navigator>
        <RootApp.Screen name="App" component={NavigationScreen} />
      </RootApp.Navigator>
        )
      }

所以当我改变这个

return <NavigationContainer><RootAppNavigator /></NavigationContainer>;

对此

return <NavigationContainer><NavigationScreen /></NavigationContainer>;

有效。

问题是我不明白为什么，所以如果有人能解释一下，我将不胜感激。

【讨论】：

好吧，看起来这并没有太大帮助。我在 TabNavigator 上放置了一个控制台日志，看起来它被调用了 8 次，即使没有改变屏幕

【解决方案2】：

将导航器移出渲染方法。（我相信这个一般修复适用于 React Navigation 5 和 6。）

你能像您所做的那样嵌套导航器，将嵌套的导航器放在屏幕的渲染组件中：NavigationContainer > Navigator > Screen > Component > NestedNavigator。

你什么不会在屏幕的渲染方法中定义嵌套的导航器本身。

每当呈现屏幕时，都会重新呈现嵌套的导航器。我不清楚实现细节，但我看到的错误消息暗示了要点为什么会这样是导航器使用钩子来更新父导航器的状态，这会导致屏幕重新渲染（然后再次渲染导航器，如此循环往复）。

这样的事情应该可以解决问题（注意如何HomeStackNavigator 和 ProfileStackNavigator 被移到 NavigationScreen 的 render 方法之外):

const ProfileStack = createStackNavigator();
const Tab = createBottomTabNavigator();


const HomeStackNavigator = () => {
  return (
  <HomeStack.Navigator initialRouteName="Home">
    <HomeStack.Screen name="Home" component={HomeScreen}/>
  </HomeStack.Navigator>
  )
}

const ProfileStackNavigator = () => {
  return(
  <ProfileStack.Navigator initialRouteName="Profile" screenOptions={{headerStyle: {elevation: 0},cardStyle: {backgroundColor: '#ffffff'}}}>
    <ProfileStack.Screen name="Profile" component={ProfileScreen}/>
  </ProfileStack.Navigator>
  )
}

export default function NavigationScreen() {
  
  return (
      <Tab.Navigator
      initialRouteName="HomeS"
      >
        <Tab.Screen name="HomeS" component={HomeStackNavigator} />
        <Tab.Screen name="ProfileS" component={ProfileStackNavigator} />
      </Tab.Navigator>
  );
}```

【讨论】：