Ящик React Navigation не отображает заголовок текущей страницы

Question

Я создал 2 страницы, а именно Home и Profile, и добавил эти две страницы для созданияDrawerNavigation. А затем добавил эту навигацию в стеке навигатора. Теперь, когда я пытаюсь отобразить заголовок в заголовке текущей страницы. Я не могу это сделать.

Вот мой код.

Попробовал DefaultNavigationOptions и получил значение props навигатора, но не работает таким образом.

const MenuStack = createDrawerNavigator(
  {
    HomePage: {
      screen: Home
    },
    ProfilePage: {
      screen: Profile
    }
  },
  {
    drawerWidth: Math.round(Dimensions.get("window").width) * 0.75,
    contentOptions: {
      activeTintColor: theme.colors.accent
    }
  }
);

const AppStack = createStackNavigator(
  {
    MenuStack: {
      screen: MenuStack
    }
  },
  {
    defaultNavigationOptions: ({ navigation }) => {
      return {
        headerLeft: (
          <Icon
            style={{ paddingLeft: 10 }}
            onPress={() => navigation.toggleDrawer()}
            name="bars"
            size={30}
          />
        ),
        headerRight: (
          <Icon
            style={{ paddingRight: 10 }}
            onPress={() => navigation.toggleDrawer()}
            name="search"
            size={30}
          />
        ),
        headerTitle: navigation.state.routeName,
        headerStyle: {
          backgroundColor: theme.colors.accent
        }
      };
    }
  }
);


export const createRootNavigator = (signedIn = false) => {
  return createAppContainer(
    createSwitchNavigator(
      {
        SignedIn: {
          screen: AppStack
        },
        SignedOut: {
          screen: WelcomeStack
        },
        SignInAndOut: {
          screen: AuthStack
        }
      },
      {
        initialRouteName: signedIn ? "SignedIn" : "SignedOut"
      }
    )
  );
};

Я добавил свойство headerTitle в createStackNavigator, но в качестве заголовка каждой страницы говорю «menustack». Ожидается заголовок страницы в шапке.

Answer 1

У вас есть 2 варианта:

1. Визуализация собственного компонента заголовка на каждом экране

Вы можете визуализировать заголовок на своих экранах, либо пользовательский, либо один из библиотеки компонентов, такой как реагирует на собственную бумагу .

function Home() {
  return (
    <React.Fragment>
      <MyCustomHeader title="Home" />
      {{ /* screen content */ }}
    </React.Fragment>
  );
}

2. Создайте стековый навигатор для каждого экрана, который должен иметь заголовок

const MenuStack = createDrawerNavigator({
  HomePage: {
    screen: createStackNavigator({ Home })
  },
  ProfilePage: {
    screen: createStackNavigator({ Profile })
  }
});

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