Question

导航到堆栈导航器中的特定组件时，我看到意外的行为。似乎尽管想导航到特定组件，但堆栈的第二个组件也被渲染。它不可见，但是我可以在react native调试器中看到它，并且看到它执行的副作用（例如，如果它运行graphql查询）。我可以通过在render()方法内部向控制台打印一条消息来确认。

例如，给定此堆栈导航器：


import { createStackNavigator } from "react-navigation";
import { Inner1 } from "./Inner1";
import { Inner2 } from "./Inner2";
import { Inner3 } from "./Inner3";

export const InnerNavigator = createStackNavigator(
  {
    Inner1: { 
      screen: Inner1,
      path: 'inner/1',
      navigationOptions: () => ({
        headerTitle: 'Inner 1 Screen',
        headerLeft: null
      })
    },
    Inner2: { 
      screen: Inner2,
      path: 'inner/2',
      navigationOptions: () => ({
        headerTitle: 'Inner 2 Screen',
        headerLeft: null
      })
    },
    Inner3: {
      screen: Inner3,
      path: 'inner/3',
      navigationOptions: () => ({
        headerTitle: 'Inner 3 Screen',
        headerLeft: null
      })
    }
  },
  {
    headerMode: "screen",
    navigationOptions: {
      header: null
    }
  }
);

从其他位置的其他组件调用navigation.navigate('Inner3');时，除render()之外，还调用了Inner1的{{1}}方法。我没想到这一点，但是也许我没有正确设置导航器？

这是一个演示行为的示例应用程序：

https://snack.expo.io/@alexwb/4f7450

导航到stackNavigator屏幕B时，它还会渲染屏幕A

0 个答案: