React Navigation - вложенные навигаторы стека предоставляют дублирующиеся заголовки

Question

У меня 3 страницы в формате:

• Страница 1
  • Страница 2
    • Страница 3

Если я показываю заголовки на всех страницах:

• Страница 1
  • Без кнопки «Назад» (обычно)
• Страница 2
  • "Go Назад к странице 1"
  • Отображает второй заголовок без кнопки возврата
• Страница 3
  • "Go Назад на страницу 1"
  • Отображает второй заголовок на "Go Назад на страницу 2"
  • Отображает третий заголовок без кнопки возврата

Я скрыл заголовки на странице 2 и странице 3, но это означает, что заголовок отображает только «Go Back to Page 1» в заголовке и никогда не обновляет его. для следующих страниц.

Очевидно, что моя вложение каким-то образом нарушено, я просто не могу понять, как это сделать.

Код:

const HeaderOptions = ({navigation}) => {
  return {
    headerTitle: props => (
      <Text style={{color: '#fff', fontWeight: 'bold'}}>My Site</Text>
    ),
    headerStyle: {
      backgroundColor: '#0D47A1',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    }
  };
};

const Page1Stack = createStackNavigator();

function Page1StackScreen() {
  return (
    <Page1Stack.Navigator initialRouteName="Page1">
      <Page1Stack.Screen
        name="Page1"
        component={Page1Screen}
        options={HeaderOptions}
      />
      <Page1Stack.Screen
        name="Page2"
        component={Page2StackScreen}
        options={HeaderOptions}
      />
    </Page1Stack.Navigator>
  );
}

const Page2Stack = createStackNavigator();

function Page2StackScreen() {
  return (
    <Page2Stack.Navigator>
      <Page2Stack.Screen
        name="Page2"
        component={Page2Screen}
        options={{headerShown: false}}
      />
      <Page2Stack.Screen
        name="Page3"
        component={Page3StackScreen}
        options={{headerShown: false}}
      />
    </Page2Stack.Navigator>
  );
}

const Page3Stack = createStackNavigator();

function Page3StackScreen() {
  return (
    <Page3Stack.Navigator>
      <Page3Stack.Screen
        name="Page3"
        component={Page3Screen}
        options={{headerShown: false}}
      />
    </Page3Stack.Navigator>
  );
}

Answer 1

Вы уверены, что вам нужен стек внутри стека? Может вам понадобится всего одна стопка:

const HeaderOptions = ({navigation}) => {
  return {
    headerTitle: props => (
      <Text style={{color: '#fff', fontWeight: 'bold'}}>My Site</Text>
    ),
    headerStyle: {
      backgroundColor: '#0D47A1',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    }
  };
};

const Stack = createStackNavigator();

function StackScreen() {
  return (
    <Stack.Navigator initialRouteName="Page1">
      <Stack.Screen
        name="Page1"
        component={Page1Screen}
        options={HeaderOptions}
      />
      <Stack.Screen
        name="Page3"
        component={Page3Screen}
      />
      <Stack.Screen
        name="Page2"
        component={Page2Screen}
      />
    </Stack.Navigator>
  );
}