React Native (Android) - Stacknavigator над другим представлением

Я начинаю разработку на React Native.

Я потратил много часов на что-то, но все еще заблокирован.

У меня есть представление «заголовок» и под ним навигатор стека и внутри навигатора вкладок.

Когда я открываю навигатор стека (с помощью кнопки входа в систему), я хотел бы поместить новое представление над «заголовком», не скрывая его, чтобы избежать неприятного эффекта при появлении нового представления. Вот пример, когда я помещаю верхний край отрицательного поля в навигатор стека, но он остается за заголовком введите описание изображения здесь

Есть ли другой способ сделать это правильно? Спасибо.

Для информации, я начал с шаблона React Native «Pepperoni App Kit», добавил свой собственный заголовок перед AppNavigator и скрыл заголовки в навигаторе вкладок.


react-native react-native-android react-navigation
person DerMth    schedule 12.05.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вместо заголовка в разделе View вы должны использовать параметр headerMode: 'screen' со StackNavigator. Вы можете контролировать видимость заголовка под каждым вспомогательным навигатором, используя параметры навигации.

Вот образец фрагмента

export const Root = StackNavigator(
  {
    Tabs: {
      screen: HOViewPager,
      navigationOptions: {
        title: "Title",
        header: <Header />,
      },
    },
    login: {
      screen: Login,
      navigationOptions: {
        headerMode: "none",
        header: null,
      },
    },
    imageoverlay: {
      screen: HOImageOverlay,
      navigationOptions: {
        headerMode: "none",
        header: null,
      },
    },
  },
  {
    mode: "modal",
    headerMode: "screen",
  }
);
person Sricharan Kambhammettu    schedule 13.05.2017
comment
Привет, извините за поздний ответ, на прошлой неделе я не работал. Спасибо, я сначала попробовал, но безуспешно, попробую еще раз, спасибо! - person DerMth; 18.05.2017
comment
Соответствует ли ‹Header /› определенному формату? Я пробовал использовать очень простой заголовок с текстом, но React не определен в этой строке. Должен ли я иметь явный заголовок left / right / title в этом заголовке? Если да, не могли бы вы показать мне образец для шапки? Спасибо. - person DerMth; 18.05.2017
comment
‹Header /› был настраиваемым компонентом, который я импортировал для использования в качестве заголовка. Вы можете игнорировать его, если не хотите заголовок. Если вы хотите использовать текст, попробуйте ниже. navigationOptions: {title: 'Title', header: ‹Text› текст заголовка ‹/Text›} - person Sricharan Kambhammettu; 18.05.2017
comment
Еще раз спасибо, это не сработало, потому что я был на RN 0.42 .. Я только что обновился до 0.44, и все работает нормально. Просто изначально не заметил этого, потому что мой проект был недавним. - person DerMth; 19.05.2017