Question

我正在制作React Native Expo应用程序。而且我在反应导航方面有一些问题。我有3页： main.js-> page1.js-> page2.js 我正在这3页之间进行导航。但是当我导航到每个页面时，它又增加了1个标题。因此，当我导航到3页时，我有2个标题。来自page2.js的一个标题和来自page1.js的第二个标题

我只希望只有一个来自当前页面的标题。我需要做些什么？我需要再添加一个页面，这些页面之间的导航位置是什么？我需要添加什么？请帮帮我代码：

// main.js createStackNavigator:

export default createStackNavigator(
  {
    Main: {
      screen: Main,
      navigationOptions: {
        header: null,
      },
    },
    Page1: {
      screen: Page1,
      navigationOptions: ({ navigation }) => ({
        headerTitle: "Page1",
    }),
    },
  },
  {
    initialRouteName: 'Main',
  }
);

// Page1.js createStackNavigator:


export default createStackNavigator(
  {
    Page1: {
      screen: Page1,
      navigationOptions: {
        header: null,
      },
    },
    Page2: {
      screen: Page2,
       navigationOptions: ({ navigation }) => ({
        headerTitle: "Text",
    }),
    },
  },
  {
    initialRouteName: 'Page1',
  }
);

// Page2:

export default createStackNavigator(
    {
      Page2: {
        screen: Page2,
        navigationOptions: {
          header: null,
        },
      },
    },
    {
      initialRouteName: 'Page2',
    }
  );

Answer 1

在第二个堆栈导航器中，可以在initialRouteName下添加属性headerMode：'none'。这将隐藏标题。

Answer 2

您使用的每个StackNavigator都会呈现一个新的页眉。在您的代码中，您嵌套了3 Stacks。每次导航到它们的每一个时，它们都会呈现其Header。

您的parentNavigator将拥有他的第一个标头，并在整个过程中始终保持全局。当您导航到Page1时，这将呈现其标题而不隐藏其父标题。当您导航到Page2时，从3个stackNavigator中保留3个标题。

如果将导航保持原样，则必须在每个堆栈上动态隐藏标题。

使用您的第一个导航器：

 {
Main: {
  screen: Main,
  navigationOptions: {
    header: null,
  },
},
Page1: {
  screen: Page1,
  navigationOptions: ({ navigation }) => ({
    headerTitle: "Page1",
    defaultNavigationOptions:{
        header:null  //this will hide the header if you are in Page1
    }
}),
},
},
  {
    initialRouteName: 'Main',
  }
);

这样做，您将隐藏Page1的标题，并且由于Page1是堆栈，因此您将仅拥有Page1标题。我不知道您如何在这些屏幕之间导航，因为这种解决方案会使从page1导航回到父Main屏幕更加困难。

在3页之间反应导航

2 个答案: