Universidad Tecnológica del Valle de Toluca

Dirección de la Carrera: Tecnologías de la Información y Comunicación.

Programa Educativo: TSU en Tecnologías de la Información y Comunicación,

Área Desarrollo De Software Multiplataforma.

Cuatrimestre: Cuarto.

Título:

Stack Navigation parte 1

Integrantes:

Alondra Troncoso Martínez

Grupo: DSM – 42

Asignatura: Diseño de Apps

Nombre del profesor: MEL Miguel Ángel Orona López

Fecha:27/Noviembre/2022
 App. Tsx

import 'react-native-gesture-handler';
import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native'
import React from 'react'
import { Text } from 'react-native';
import { Stacknavigator } from './src/navigation/StackNavigator';

export const App = () => {

return (
<NavigationContainer>
<Stacknavigator/>
</NavigationContainer>
)
}
export default App;

Stack NavigatorTsx

import React from 'react';

import { createStackNavigator } from '@react-navigation/stack';
import{ inicioscreen } from '../screens/inicioscreen'
import{ unoscreen } from '../screens/unoscreen'
import{ dosscreen } from '../screens/dosscreen'
import{ finalscreen } from '../screens/finalscreen'

const Stack = createStackNavigator();

export const Stacknavigator =()=> {

return (
<Stack.Navigator>
<Stack.Screen name="inicio" component={inicioscreen} />
<Stack.Screen name="unoscreen" component={unoscreen} />
<Stack.Screen name="dosscreen" component={dosscreen} />
<Stack.Screen name="finalscreen" component={finalscreen} />
</Stack.Navigator>
);
}

Inicio Screen
import React from 'react'
import { Text, View } from 'react-native'

export const inicioscreen = () => {

return (
<View>
<Text>
inicioscreen
</Text>
</View>
)
}

Uno Screen tsx

import React from 'react'

import { Text, View } from 'react-native'

export const unoscreen = () => {

return (
<View>
<Text>
unoscreen
</Text>
</View>
)
}

Dos Screen tsx

import React from 'react'

import { Text, View } from 'react-native'

export const dosscreen = () => {

return (
<View>
<Text>
dosscreen
</Text>
</View>
)
}
 Final Screen

import React from 'react'

import { Text, View } from 'react-native'

export const finalscreen = () => {

return (
<View>
<Text>
finalscreen
</Text>
</View>
)
}