Vamos a explicar cómo podemos crear el esquema de ruteo para nuestra aplicación en Vue Native; de tal manera, que esta es una característica indispensable para crear prácticamente cualquier tipo de aplicación ya que en la mayoría de los casos necesitamos navegar entre varias pantallas:
Y con este paquete, lo podemos lograr fácilmente.
Aquí lo primero que tienes que tener en cuenta, es que en Vue Native NO tenemos un main.js o index.js o en pocas palabras…
El archivo que se encarga de crear la instancia de Vue y cargar componentes como hacíamos con Vue Router; aquí nuestro archivo de arranque viene siendo el llamado App.vue, por lo tanto aquí definimos nuestro esquema de navegación.
Siguiendo la documentación oficial, necesitamos instalar algunos paquetes de manera global, a mi en particular NO me funcionó la instalación global y también necesite algunos paquetes adicionales de react para que funcione correctamente, cosa que explicaba en otra entrada que mencionaba el error que me ocurría de Unable to resolve module 'react-native-screen'.
Así que, en mi proyecto:
npm install react-native-screens react-native-reanimated react-native-gesture-handler react-native-paper
npm install vue-native-routerYa con esto, podemos crear nuestras páginas o screen para navegar: vamos a crear un par en una carpeta que vamos a llamar como screens:
screens/IndexScreen.vue:
<template>
<view>
<text>Index</text>
</view>
</template>screens/DetailScreen.vue:
<template>
<view>
<text>Detail</text>
</view>
</template>Y lucen del a siguiente manera:
Y nuestro App.vue:
Aquí te dejo el proyecto completo de Ruteo en Vue Native:
<template>
<app-navigator></app-navigator>
</template>
<script>
import {
createAppContainer,
createStackNavigator,
} from "vue-native-router";
import IndexScreen from "./screens/IndexScreen.vue";
import DetailScreen from "./screens/DetailScreen.vue";
const StackNavigator = createStackNavigator(
{
Index: IndexScreen,
Detail: DetailScreen
},
{
initialRouteName: 'Detail',
}
);
const AppNavigator = createAppContainer(StackNavigator);
export default {
components: { AppNavigator },
}
</script>React native, empleado de manera interna por Vue native
Vue native interna emplea React native para cada uno de sus componentes, entre ella la navegación, que como puedes ver, se asemeja mucho a lo que hacemos con Vue Router, en el cual tenemos un componente para referenciar los componentes y sus rutas (StackNavigator) y otro para establecer a nivel de la app (createAppContainer), ambas funciones cargadas del paquete react-native
te dejo el código fuente, que es parte de mi CURSO COMPLETO:
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter