Удалить кнопку "Назад" в стеке братьев и сестер в реагировать родной

Question

Я пытаюсь удалить заголовок (см. Изображение) на родственных навигаторах.

У меня есть стекаНавигатор, например:

const navigator = createStackNavigator({
  'route': RouteComponent,
  'sibling1': Sibling1Navigator,
  'sibling2': Sibling2Navigator,
},
{
  ...defaultNavigationOptions,
  // @ts-ignore
  headerLayoutPreset: 'center',
  headerMode: 'screen',
})

sibling1Navigator выглядит так:

    const Sibling1Navigator = createStackNavigator(
  {
    'route1': Route1Component,
    'route1': Route2Component,
    'route3': Route3Component,
  },
  {
    transitionConfig: HorizontalSlideTransitionConfig,
    navigationOptions: ({ navigation: { goBack, state, navigate } }) => {
      return {
        headerTransparent: true,
        headerStyle: {
          backgroundColor: '#FFF0',
        },
        headerLeft: (
          // tslint:disable-next-line
          <Button />
        ),
      }
    },
  },
)

Я использую заголовок на route, чтобы показать заголовок, но на маршрутах route1 или route2 Я не хочу вернуться на страницу (например, изображение).

Я использую react-navigation: ^2.17.0

Я видел много примеров того, как это сделать. проще всего было бы добавить конфиг на каждую страницу. Я посмотрел на все ответы на этот вопрос аналогичный вопрос , но я надеялся, что я смог что-то сделать с помощью stackNavigators. Есть ли другой способ сделать это или это должно быть сделано внутри компонента?

Answer 1

Я решил это, следуя документам с Навигатор вкладок содержит стек, и вы хотите скрыть панель вкладок на определенных экранах

Я разделил свои навигаторы в соответствии с документацией, которая рекомендована для этого.

Вот мой новый код, чтобы привести пример того, что я сделал.

    const navigator = createStackNavigator({
  'route': RouteComponent,
},
{
  ...defaultNavigationOptions,
  // @ts-ignore
  headerLayoutPreset: 'center',
  headerMode: 'screen',
})

const ParentNavigator = createStackNavigator({
  'Another route': AnotherNavigator,
  'sibling1': Sibling1Navigator,
  'sibling2': Sibling2Navigator,
}, {
  headerMode: 'none',
  navigationOptions: ({ navigation: { goBack, state, navigate } }) => {
    return {
      tabBarVisible: false,
    }
  },
})

Таким образом, в родительском stackNavigator я удаляю заголовок, я также могу удалить tabBar.

Надеюсь, это поможет любому, кто ищет тот же вопрос, что и у меня.

Answer 2

Вы можете скрыть заголовок, установив высоту и ширину стиля заголовка в ноль в React Navigation,

, например:

const SignInStack = createStackNavigator({
    sign: { screen: SignIn, 
        navigationOptions: {
            headerStyle: {
                height: 0,
                width: 0,
            },
        },
       },
});

или

const SignInStack = createStackNavigator({
        sign: SignIn,
    }, 
    {
        navigationOptions: {
            headerStyle: {
               height: 0,
               width: 0,
            }
       }
    }
);