React-native-router-flux: Как использовать модальный

Созданный на 3 авг. 2017  ·  16Комментарии  ·  Источник: aksonov/react-native-router-flux

Версия

  • реакция-родной-маршрутизатор-поток v4b15
  • реакция нативная v46

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

<Router>
  <Scene key="root" hideNavBar hideTabBar>
    <Scene key="tabBar" tabs>
      <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
      <Scene key="favorites" component={Favorites} title="Favorites" />
      <Scene key="messages" component={Messages} title="Messages" />
      <Scene key="profile" component={Profile} title="Profile" />
    </Scene>
    <Scene key="modal" modal>
      <Scene key="map" component={Map} title="Map" hideNavBar />
    </Scene>
    <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
  </Scene>
</Router>;

Я пытаюсь заставить компонент карты отображаться модально.

MapButton выглядит следующим образом:

const MapButton = () =>
  <TouchableWithoutFeedback onPress={Actions.map}>
    <Text>Map</Text>
  </TouchableWithoutFeedback>;

Я должен использовать это, потому что rightText очень глючит и не будет отображаться в половине случаев.

Самый полезный комментарий

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

Все 16 Комментарий

Попробуйте поместить свою сцену root в модальный режим.
Нравится:

<Router>
    <Scene key="modal" modal>
       <Scene key="root" hideNavBar hideTabBar>
            <Scene key="tabBar" tabs>
              <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
              <Scene key="favorites" component={Favorites} title="Favorites" />
              <Scene key="messages" component={Messages} title="Messages" />
              <Scene key="profile" component={Profile} title="Profile" />
            </Scene>
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />

Вы должны сделать корневую сцену как modal , как предложил @luco . Пожалуйста, проверьте пример проекта, вход реализован как модальный

Это все еще не работает.

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
      </Scene>
    </Scene>
  </Router>

Для меня не имеет никакого смысла то, что обертывание всего в модальной сцене сделало бы одну конкретную сцену модальной, когда я не хочу, чтобы остальные (например, ListingDetail) были модальными. Есть ли в Actions.map определенный параметр, который мне нужно использовать?

К сожалению, это проблема реагирующей навигации - она ​​не поддерживает разные анимации для дочерних элементов стека. Я не могу воспроизвести вашу проблему (код выглядит нормально), поэтому я прошу всех разветвить и изменить этот пример репо, если они хотят, чтобы их проблемы были решены. Модальный вход из примера работает нормально, как вы можете видеть

Так вы говорите, что нет возможности поддерживать модальный переход iOS? Т.е. тот, который скользит снизу?

Что ты имеешь в виду? Я дважды сказал вам, что в примере есть модальный экран входа в систему (который скользит снизу)

Хорошо, но вы также сказали, что мой код выглядит нормально....

Я изо всех сил старался следовать примеру, но из-за отсутствия документации я не могу сказать, в чем причина всего этого. Я не могу просто скопировать и вставить этот код, поскольку, очевидно, мои маршруты разные.

То же самое я мог бы сказать и о вашем коде - я не вижу всего проекта и всех деталей. Например, вы можете использовать Actions.map , и он может даже не генерироваться (и быть нулевым) во время компиляции.

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

Вы говорите, что у вас не может быть переходов push и modal в одном приложении?

МОЙ БОГ. Не в приложении, а в одном контейнере. После более глубокого просмотра в вашем коде есть ошибка - «карта» все еще является дочерним элементом «обычного» контейнера (ключ = корень), а не модального (ключ = «модальный»). Похоже, вы не понимаете, что делаете. Возможно, этот компонент слишком сложен для вас...

Попробуй это:

<Router>
    <Scene key="modal" modal>
      <Scene key="root" hideNavBar hideTabBar>
        <Scene key="tabBar" tabs>
          <Scene key="listings" component={Listings} title="Listings" initial right={MapButton} />
          <Scene key="favorites" component={Favorites} title="Favorites" />
          <Scene key="messages" component={Messages} title="Messages" />
          <Scene key="profile" component={Profile} title="Profile" />
        </Scene>
      </Scene>
        <Scene key="map" component={Map} title="Map" hideNavBar />
        <Scene key="listingDetail" component={ListingDetail} title="Listing Detail" clone />
    </Scene>
  </Router>

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

Несколько недавних сообщений здесь посвящены синтаксису JSX и пониманию контейнеров навигации, а не документации.
Я добавил больше информации о modal.

Привет,

работал на меня

<Router navigationBarStyle={{backgroundColor: '#FF5722'}} titleStyle={{color: '#fff'}}>
        <Modal>
            <Stack key="root">
                <Scene key='login_screen' component={LoginScreen} title='login' hideNavBar={true} />
            </Stack>
            <Scene key='cadastro_screen' component={CadastroScreen} title='Cadastro' hideNavBar={false} />
        </Modal>
</Router>

Когда я добавляю модальную оболочку, я получаю 2 панели навигации в верхней части моего представления, когда я добавляю hideNavBar, обе они исчезают. Как я могу решить эту проблему? Мне нужна только одна панель вкладок, а не две, очевидно...?

Используйте <Modal hideNavBar> , потому что <Modal> добавит свою собственную панель навигации, так что в итоге у вас будет две с одной из вашей корневой сцены.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги