React Native: Mostrar una vista modal desde un botón de la barra de pestañas
Estoy usando React Native para mi aplicación. Todo está funcionando bien excepto una cosa.
Me gustaría implementar una vista de modal que se muestre cuando el usuario hace clic en el botón central (+) de la barra de pestañas. Se parece a la aplicación de Youtube.
Después de varios días, no encontré una solución efectiva.
Aquí está mi código para la barra de pestañas y el navegador.
Tab:
export default function App() {
return (
<tabs.screen name=”Ventes” component=”{venteScreenNavigator}” options=”{{” headershown:=”” false,=”” tabbaricon:=”” ({=”” focused=”” })=””> (
),
}}
/>
<tabs.screen name=”Map” component=”{mapScreenNavigator}” options=”{{” headershown:=”” false,=”” tabbaricon:=”” ({=”” focused=”” })=””> (
)
}}
/>
<tabs.screen name="Liste" component="{listeScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
<view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
<image source="{require("./assets/Document.png")}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
</view>
),
}}
/>
<tabs.screen name="Espace" component="{espaceScreenNavigator}" options="{{" headershown:="" false,="" tabbaricon:="" ({="" focused="" })=""> (
<view style="{{" alignitems:="" "center",="" justifycontent:="" "center"="" }}="">
<image source="{require("./assets/monespaceicone.png")}" resizemode="contain" style="{{" width:="" 25,="" height:="" 25,="" tintcolor:="" focused="" "black"="" :="" "gray",="" }}=""></image>
</view>
),
}}
/>
</tabs.screen></tabs.screen></tabs.screen></tabs.screen></tabs.navigator>
</navigationcontainer>
)
}
Navegador:
const venteScreenNavigator = () => {
return (
<stack.navigator>
<stack.screen name="Ventes" component="{Ventes}" options="{{" headerright:="" ()=""> (
<view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Plus.png')}">
</image>
</touchableopacity>
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Chat.png')}">
</image>
</touchableopacity>
</view>
)
}}
/>
<stack.screen name="Screens" component="{Screens}"></stack.screen>
</stack.screen></stack.navigator>
)
}
export {venteScreenNavigator}
const mapScreenNavigator = () => {
return (
<stack.navigator>
<stack.screen name="Map" component="{Map}" options="{{" headerright:="" ()=""> (
<view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Plus.png')}">
</image>
</touchableopacity>
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Chat.png')}">
</image>
</touchableopacity>
</view>
)
}}
/>
<stack.screen name="Screens" component="{Screens}"></stack.screen>
</stack.screen></stack.navigator>
)
}
export {mapScreenNavigator}
const listeScreenNavigator = () => {
return (
<stack.navigator>
<stack.screen name=”Liste” component=”{Liste}” options=”{{” headerright:=”” ()=””> (
<view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Plus.png')}">
</image>
</touchableopacity>
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Chat.png')}">
</image>
</touchableopacity>
</view>
)
}}
/>
<stack.screen name="Screens" component="{Screens}"></stack.screen>
</stack.screen></stack.navigator>
)
}
export {listeScreenNavigator}
const espaceScreenNavigator = () => {
return (
<stack.navigator>
<stack.screen name=”Espace” component=”{Espace}” options=”{{” headerright:=”” ()=””> (
<view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Plus.png')}">
</image>
</touchableopacity>
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Chat.png')}">
</image>
</touchableopacity>
</view>
)
}}
/>
<stack.screen name="Screens" component="{Screens}"></stack.screen>
<stack.screen name="Profil" component="{Profil}" options="{{" headerright:="" ()=""> (
<view style="{{flexDirection:" 'row',="" marginright:="" 10}}="">
<touchableopacity>
<image style="{styles.image}" source="{require('../assets/Setting.png')}">
</image>
</touchableopacity>
</view>
)
}}
/>
<stack.screen name="ModifierProfil" component="{ModifierProfil}"></stack.screen>
</stack.screen></stack.screen></stack.navigator>
)
}
export {espaceScreenNavigator}
¿Puede decirme cómo mostrar el modal cuando el usuario hace clic en el botón de la barra de pestañas?
¡Gracias chicos!
davy.ai
Para mostrar un modal cuando el usuario hace clic en el botón del medio (+) de la tabbar en React Native, se puede utilizar el paquete
react-native-modal
.Primero, instala el paquete ejecutando el siguiente comando en tu terminal:
Luego, en tu archivo
App.js
, importa el paquete:A continuación, añade un estado a tu componente para manejar la visibilidad del modal:
Añade un componente
Modal
y utiliza la propiedadisVisible
para mostrar u ocultar el modal:En el componente
Tabs.Screen
que representa el modal, utiliza la propiedadlisteners
para evitar que la pestaña se centre y mostrar el modal en su lugar. Cuando el usuario hace clic en el botón “Cerrar” dentro del modal, se puede ocultar el modal de nuevo estableciendo el estadoisModalVisible
afalse
.Esto debería mostrar un modal cuando el usuario hace clic en el botón del medio (+) de la tabbar en tu aplicación de React Native.