Реактивная навигация: навигатор с вложенным стеком и навигатор по вкладкам внутри навигатора-переключателя дают 2 заголовка

Question

Я использую комбинацию навигатора вкладок, стекового навигатора и переключателя навигатора в своем собственном приложении реакции с react-navigation.Обратите внимание, что я должен поместить каждый экран навигатора вкладок в свой собственный навигатор стека, чтобы использовать встроенную функцию заголовка.

Функциональные возможности работают.Но я получаю 2 заголовка для страниц Feed и Profile, например:

Я просто хочу, чтобы у каждого экрана был свойзаголовок и экран комментариев, чтобы иметь кнопку назад.Я знаю, что код не очень чистый, и размещение всех этих навигаторов друг в друге требует много накладных расходов.Так каков наилучший способ добиться этого?

App.js

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const AppStack = createStackNavigator({ 
  Tab: TabStack,
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const MainStack = createSwitchNavigator(
  {
    Home: AppStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

Answer 1

Вы сказали, что хотите, чтобы экран Comments имел собственный заголовок (как и все другие экраны) и кнопку возврата. К чему конкретно следует обратиться? Понимание структуры навигации облегчит проектирование.

Было бы чище, если бы ваша AppStack была просто вашей TabStack. Добавление на экране Comments на том же уровне, что и TabStack, скорее всего, не поможет решить проблему с несколькими заголовками.

Здесь я покажу, как вы можете вырезать AppStack целиком и вкладывать Comments во вкладки Profile из Feed, в зависимости от ваших потребностей.

const FeedScreenStack = createStackNavigator({
  FeedStack: {
    screen: feed,
    navigationOptions: {
      headerTitle: "Feed"
    }
  },
  // if you want Comments to go back to "Feed"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
});

const ProfileScreenStack = createStackNavigator({
  ProfileStack: {
    screen: profile,
    navigationOptions: {
      headerTitle: "My Profile"
    }
  },
  // if you want Comments to go back to "Profile"
  Comments: { 
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
})

const TabStack = createBottomTabNavigator({
  Feed: { screen: FeedScreenStack },
  Profile: { screen: ProfileScreenStack }
});

const MainStack = createSwitchNavigator(
  {
    Home: TabStack,
    Auth: AuthStack
  },
  {
    initialRouteName: 'Home'
  }
);

const AppContainer = createAppContainer(MainStack);

Однако, если вы хотите, чтобы Comments фактически жил выше Profile и Feed, вы должны либо сделать его собственной вкладкой, либо изменить его на Modal на верхнем уровне. Дайте мне знать, если это больше похоже на то, что вам нужно, и я могу опубликовать более подробную информацию!

Answer 2

Попробуйте изменить AppStack. Вот так:

Отредактировано:

Я забыл включить его в навигационные опции.попробуй.

const AppStack = createStackNavigator({ 
  Tab: {
    screen:TabStack,
    navigationOptions: () => ({
      headerMode: 'none',

      // or this

      header: null
     })
  },
  Comments: {
    screen: comments, 
    navigationOptions: {
      headerTitle: "Comments"
    },
  }
},
);