Buscando consejos generales sobre las mejores prácticas para adaptar React Navigation para la web. Me gustaría mover las pestañas inferiores (en nativo) a la parte superior (en la web), por ejemplo. ¿Cuál es un buen enfoque para hacer eso? ¿Hay alguna forma de ocultar/mostrar/cambiar la navegación según la plataforma?
Resultó ser más fácil de lo que pensaba. Gracias @Drew Reese
Si el siguiente es su navegador raíz, por ejemplo:
function RootNavigator() { return ( <Stack.Navigator> <Stack.Screen name="authNav" component={AuthNavigator} /> <Stack.Screen name="main" component={MainNavigator} /> </Stack.Navigator> ); } Si desea que su aplicación web cargue el navegador principal como una barra lateral y que sus nativos carguen el navegador principal como un navegador inferior, por ejemplo, cree un navegador de pestañas inferiores en MainNavigator.native.js y una barra lateral ( navegador de cajones con el tipo de cajón establecido en permanente) en MainNavigator.js.
Incluso la importación sigue siendo la misma. ¡Eficiente!
import MainNavigator from './MainNavigator'
Puede lograr esto al menos de dos maneras diferentes, aunque creo que la mejor es con consultas de medios.
Una forma de hacerlo es con Consultas de medios , donde básicamente verifica los tamaños de screen .
Puede renderizar condicionalmente para que el tamaño de pantalla actual esté en un rango particular, o más pequeño o más grande que un tamaño particular.
Aquí hay una guía para consultas de medios de CSS Tricks
Abreviaré con
xs,sm,md,lg,xlpara ciertos tamaños (extra-small,small,medium,large,extra-large).
en tu escenario
Entonces, básicamente, puede representar las pestañas (o cualquier elemento de la interfaz de usuario, en realidad) u ocultarlas, o aplicar css condicionalmente.
Otra forma de hacerlo es con el agente de usuario .
Puede verificar las cadenas específicas de la plataforma, como Android , iPhone , iPad , Macintosh , etc.
const { userAgent } = window.navigator console.log(userAgent)