React-native-router-flux: Cómo usar modales

Creado en 3 ago. 2017  ·  16Comentarios  ·  Fuente: aksonov/react-native-router-flux

Versión

  • reaccionar-nativo-enrutador-flujo v4b15
  • reaccionar nativo v46

Realmente estoy luchando con los modales ya que no hay documentación sobre ellos y el ejemplo no tiene comentarios ni indicaciones sobre cómo ciertas escenas se muestran modalmente y otras no. Aquí está mi código.

<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>;

Estoy tratando de hacer que el componente Mapa se muestre de manera modal.

MapButton es el siguiente:

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

Tengo que usar esto porque rightText tiene muchos errores y no se procesa la mitad del tiempo.

Comentario más útil

Gracias, esto soluciona el problema. ¿Cómo esperas que entienda algo cuando no hay una línea de documentación al respecto? Ha habido muchas personas abriendo problemas sobre esta característica modal, tal vez eso sea indicativo de la necesidad de documentos...

Todos 16 comentarios

Intenta poner tu escena root dentro de modal.
Como esto:

<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 />

Deberías hacer una escena raíz como modal como sugirió @luco . Verifique Proyecto de ejemplo, el inicio de sesión se implementa como modal

Esto todavía no funciona.

<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>

No tiene ningún sentido para mí que envolver todo en la escena modal haga que una escena específica sea ​​modal cuando no quiero que el resto (como ListingDetail) sea modal. ¿Hay algún parámetro específico en Actions.map que deba usar?

Desafortunadamente, es un problema de la navegación reactiva: no admite diferentes animaciones para los niños de la pila. No puedo reproducir su problema (el código se ve bien), es por eso que les pido a todos que bifurquen y modifiquen este ejemplo de repositorio si quieren que se resuelvan sus problemas. El modo de inicio de sesión del Ejemplo funciona bien como puede ver

Entonces, ¿está diciendo que no hay forma de admitir una transición modal de iOS? Es decir, uno que se desliza desde la parte inferior?

¿Qué quieres decir? Te dije dos veces que el ejemplo tiene una pantalla de inicio de sesión modal (que se desliza desde la parte inferior)

Ok, pero también dijiste que mi código se ve bien....

Hice todo lo posible para seguir el Ejemplo, pero debido a que no hay documentación, no puedo decir cuál es la razón por la que todo está allí. No puedo simplemente copiar y pegar ese código ya que obviamente mis rutas son diferentes.

Lo mismo podría decirle sobre su código: no veo todo el proyecto y todos los detalles. Por ejemplo, puede usar Actions.map e incluso podría no generarse (y ser nulo) durante la compilación.

Me complace proporcionar más ejemplos de código si me dice lo que necesita. Actions.map funciona, solo hace la transición desde el lado interior de lo que espero que sea desde abajo.

¿Está diciendo que no puede tener transiciones push y modal en la misma aplicación?

DIOS MÍO. No en la aplicación, sino en un contenedor. Después de una mirada más profunda, su código tiene un error: 'mapa' sigue siendo un elemento secundario del contenedor 'normal' (clave = raíz), no modal (clave = 'modal'). Parece que no entiendes lo que estás haciendo. Tal vez este componente es demasiado complejo para ti...

Prueba esto:

<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>

Gracias, esto soluciona el problema. ¿Cómo esperas que entienda algo cuando no hay una línea de documentación al respecto? Ha habido muchas personas abriendo problemas sobre esta característica modal, tal vez eso sea indicativo de la necesidad de documentos...

Algunas publicaciones recientes aquí son sobre la sintaxis JSX y la comprensión de los contenedores de navegación, no sobre la documentación.
Agregué más información sobre modal.

Hola,

trabajó para mi

<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>

Cuando agrego el contenedor modal, obtengo 2 barras de navegación en la parte superior de mi vista, cuando agrego hideNavBar, ambos desaparecen. ¿Cómo puedo resolver este problema? Quiero una barra de pestañas, no dos, obviamente... ?

Use <Modal hideNavBar> porque <Modal> agregará su propia barra de navegación para que termine teniendo dos con la de su escena raíz.

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

rafaelcorreiapoli picture rafaelcorreiapoli  ·  3Comentarios

wootwoot1234 picture wootwoot1234  ·  3Comentarios

basdvries picture basdvries  ·  3Comentarios

booboothefool picture booboothefool  ·  3Comentarios

jgibbons picture jgibbons  ·  3Comentarios