Creando tus primera aplicación con Vue Native Router

- Andrés Cruz

In english
Creando tus primera aplicación con Vue Native Router

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

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

 

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.

!Cursos a!

10$

En Udemy

Quedan 0 días!

Udemy

!Cursos desde!

4$

En Academia

Ver los cursos

!Libros desde!

1$

Ver los libros
¡Hazte afiliado en Gumroad!
!Web Alojada en Hostinger!