Cómo tener una navegación dentro de un modal con react-native-router-flux
Necesito tener una navegación dentro de un modal en mi aplicación react-native
Usando la nueva versión dereact-native-router-flux
, no parece posible hacer eso. Puedo crear una animación vertical para mostrar la siguiente escena, que no es lo mismo que tener un modal encima de una escena.
<Scene key="login" direction="vertical">
<Scene key="loginModal" component={Login} schema="modal" title="Login"/>
<Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2"/>
</Scene>
En mi caso, necesito que mi modal tenga un fondo de color transparente, para poder ver la escena detrás del modal.
La única forma de hacerlo sería usar el componente<Modal>
de react-native y tener una navegación en él, pero no parece que haya una manera de definir algo como esto en elRouter
.
Lo que necesitaría es más algo como esto:
{/* LoginModal would be a wrapper which can render children */}
<Scene key="login" component={LoginModal}>
<Scene key="loginModal" component={Login} title="Login"/>
<Scene key="loginModal2" hideNavBar={true} component={Login2} title="Login2" panHandlers={null} duration={1}/>
</Scene>
Entonces, enLoginModal
estaría renderizando algo como esto:
render(){
return (
<Modal animated={true} transparent={true} visible={true}>
{/* Render the scene that needs to be rendered,
including the navigation bar */}
{this.props.children}
</Modal>
);
¿Hay alguna manera de que pueda lograr esto? ¿O conoces alguna forma mejor de tener un sistema de ruta similar para react-native?
Gracias.